Select

component

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

Install

php bin/console ux:install select \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (3)

Default

Light

Dark

Code

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

Multiple

Light

Dark

Code

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

Light

Dark

Code

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