View as Markdown

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

Loading... 
<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

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

Install the following Composer dependencies:

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

Copy the following file(s) into your app:

{# @block content The select options (`&lt;option&gt;` elements). #}
&lt;select
    class=&quot;{{ (&#039;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 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/select&gt;

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.

Loading... 
<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.

Loading... 
<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

<twig:Select>

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