Combobox

Basic

Pass a string array as data for the simplest setup.

<Combobox
  data={['Apple', 'Banana', 'Cherry', /* … */]}
  label="Favourite fruit"
  placeholder="Search fruits…"
/>

Object data

Use { value, label } objects when the submitted value differs from the display label — e.g. country codes.

<Combobox
  data={[
    { value: 'us', label: 'United States' },
    { value: 'gb', label: 'United Kingdom' },
    /* … */
  ]}
  label="Country"
  name="country"
/>

Clearable

Add clearable to show an × button that resets the value.

<Combobox data={fruits} value="Mango" clearable />

Description and error

<Combobox label="Fruit" description="We'll personalise your recommendations." />
<Combobox label="Fruit" error="Please select a fruit." />

Disabled

<Combobox data={fruits} value="Kiwi" disabled />

Keyboard navigation

The Combobox is fully keyboard-accessible without JS enhancements beyond the reactive island itself:

• Type — filters the option list
• ↑ / ↓ — moves keyboard focus through matching options
• Enter — selects the focused option
• Escape — closes the dropdown and restores the previous value
• Tab / click outside — closes the dropdown