Select

Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants

<form class="w-full max-w-sm">
    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
    <twig:Select id="countries">
        <option selected>Choose a country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
    </twig:Select>
</form>

Installation

bin/console ux:install select --kit flowbite-4

That's it!

Install the following Composer dependencies:

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

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

templates/components/Select.html.twig

{# @block content The select options (`<option>` elements) #}
<select
    class="{{ ('block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body disabled:text-fg-disabled ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</select>

Happy coding!

Usage

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

Examples

Multiple

Apply the multiple attribute to the select component to allow users to select one or more options.

<form class="w-full max-w-sm">
    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
    <twig:Select id="countries" multiple>
        <option selected>Choose a country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
    </twig:Select>
</form>

Disabled state

Apply the disabled attribute to the select component to prevent users from interacting with it.

<form class="w-full max-w-sm">
    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
    <twig:Select id="countries" disabled>
        <option selected>Choose a country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
    </twig:Select>
</form>

API Reference

Select

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