Select
Native select dropdown with custom styling.
Usage
Basic
<div class="w-full max-w-sm"> <twig:ui:Select id="framework"> <option value="">Select a framework</option> <option value="symfony">Symfony</option> <option value="laravel">Laravel</option> <option value="cakephp">CakePHP</option> <option value="codeigniter">CodeIgniter</option> </twig:ui:Select> </div>
Sizes
<div class="grid w-full max-w-sm gap-4"> <div class="grid w-full gap-3"> <twig:ui:Label for="select-sm">Small</twig:ui:Label> <twig:ui:Select id="select-sm" size="sm"> <option value="">Select a framework</option> <option value="symfony">Symfony</option> <option value="laravel">Laravel</option> </twig:ui:Select> </div> <div class="grid w-full gap-3"> <twig:ui:Label for="select-md">Medium (default)</twig:ui:Label> <twig:ui:Select id="select-md" size="md"> <option value="">Select a framework</option> <option value="symfony">Symfony</option> <option value="laravel">Laravel</option> </twig:ui:Select> </div> <div class="grid w-full gap-3"> <twig:ui:Label for="select-lg">Large</twig:ui:Label> <twig:ui:Select id="select-lg" size="lg"> <option value="">Select a framework</option> <option value="symfony">Symfony</option> <option value="laravel">Laravel</option> </twig:ui:Select> </div> </div>
With Label
<div class="grid w-full max-w-sm gap-3"> <twig:ui:Label for="framework-2">Framework</twig:ui:Label> <twig:ui:Select id="framework-2"> <option value="">Select a framework</option> <option value="symfony">Symfony</option> <option value="laravel">Laravel</option> <option value="cakephp">CakePHP</option> <option value="codeigniter">CodeIgniter</option> </twig:ui:Select> </div>
Disabled
<div class="w-full max-w-sm"> <twig:ui:Select id="framework-disabled" disabled> <option value="">Select a framework</option> <option value="symfony">Symfony</option> <option value="laravel">Laravel</option> <option value="cakephp">CakePHP</option> <option value="codeigniter">CodeIgniter</option> </twig:ui:Select> </div>