Select

Custom select component with search/filter support and full keyboard navigation.

Default

    <.select id="fruit-select">
  <.select_option value="apple" label="Apple" />
  <.select_option value="banana" label="Banana" />
  <.select_option value="orange" label="Orange" />
</.select>
  

Searchable

Enable search to filter through options in large lists.

Searchable

    <.select id="fruit-select" searchable>
  <.select_option value="apple" label="Apple" />
  <.select_option value="banana" label="Banana" />
  <.select_option value="cherry" label="Cherry" />
</.select>
  

With Groups

Organize options into logical groups.

With Groups

    <.select id="food-select">
  <.select_group label="Fruits">
    <.select_option value="apple" label="Apple" />
    <.select_option value="banana" label="Banana" />
  </.select_group>
  <.select_separator />
  <.select_group label="Vegetables">
    <.select_option value="carrot" label="Carrot" />
    <.select_option value="potato" label="Potato" />
  </.select_group>
</.select>
  

Usage Notes

The select component uses the WAI-ARIA combobox pattern for accessibility.
Full keyboard navigation: Arrow keys to navigate, Enter/Space to select, Escape to close.
A hidden input is rendered for form compatibility.