Select

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

100%

<twig:Select class="max-w-xs">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
    <option value="grapes">Grapes</option>
    <option value="pineapple">Pineapple</option>
</twig:Select>

Installation

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

Install the following Composer dependencies:

composer require twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

Copy the following file(s) into your app:

templates/components/Select.html.twig

<select
    {{ attributes.defaults({
        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'|tailwind_classes,
    }) }}
>
    {##- The select options (`<option>` elements). -#}
    {%- block content %}{% endblock -%}
</select>

Usage

<twig:Select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>

Accessibility

Select renders a real <select>, so it keeps the platform's own picker, keyboard handling and type-ahead. This is the most accessible way to present a list of options.
Give it a visible Label bound with for and id. The first option is not a label, and a placeholder option should be disabled so it cannot be chosen.
Group related options in a real <optgroup>, whose label is announced when moving into the group.
Set aria-invalid="true" for the invalid styling, and point aria-describedby at the message explaining what is wrong. Prefer the native required attribute over a client-side check alone.

API Reference

`<twig:Select>`

Block	Description
`content`	The select options (`<option>` elements).