View as Markdown

Select

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

Loading... 
<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 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;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 [&amp;&gt;span]:line-clamp-1 &#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>

API Reference

<twig:Select>

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