Select

Displays a list of options for the user to pick from. Available as Native Select (browser default) or Custom Select (popover-based).

Native Select

Uses the browser's native dropdown. Simple and accessible.

Custom Select

Popover-based with full styling control and keyboard navigation.

Custom Select with Search

Searchable dropdown with grouped options. Type to filter.

Custom Select with Pre-selected Value

With Label (Native)

Country

States (Native)

With Option Groups (Native)

Usage

Native Select

<twig:Select placeholder="Select an option">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</twig:Select>

Custom Select

<twig:CustomSelect placeholder="Select an option">
    <twig:CustomSelectOption value="1" label="Option 1" />
    <twig:CustomSelectOption value="2" label="Option 2" />
</twig:CustomSelect>

<twig:CustomSelect placeholder="Select..." :searchable="true" searchPlaceholder="Search...">
    <twig:CustomSelectGroup label="Group 1">
        <twig:CustomSelectOption value="a" label="Option A" />
    </twig:CustomSelectGroup>
</twig:CustomSelect>