Select

A dropdown control that allows users to choose from a list of options.

<twig:Select class="max-w-sm">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

$ composer require --dev symfony/ux-toolkit

Then, run the following command to install the component and its dependencies:

$ bin/console ux:install select --kit shadcn

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

Copy the following file(s) into your Symfony app:

templates/components/Select.html.twig

{# @block content The default block #}
<select
    class="{{ 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</select>

If necessary, install the following Composer dependencies:

$ composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

And the most important, enjoy!

Usage

<twig:Select class="max-w-sm">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>

Examples

Default

<twig:Select class="max-w-sm">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>

With Label

<div class="grid w-full max-w-sm items-center gap-1.5">
    <twig:Label for="framework">Framework</twig:Label>
    <twig:Select id="framework">
        <option value="symfony">Symfony</option>
        <option value="laravel">Laravel</option>
        <option value="tempest">Tempest</option>
    </twig:Select>
</div>

Disabled

<twig:Select disabled class="max-w-sm">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>

API Reference

Select

Block	Description
`content`	The default block