forms contract

Combobox

Searchable dropdown for >30 options. Filters as the user types.

Variants

single
Pick one
multiple
Pick many — chips render in the trigger
creatable
Add new option from the typed query

Sizes

md
36pt trigger, 320pt panel
lg
44pt trigger, 360pt panel

Slots

empty
Rendered when no options match the query
footer
Sticky footer slot — for "Create new", "View all"

Example

<Combobox value={user} onChange={setUser} options={users} renderOption={(u) => <UserRow {...u} />} />

Usage rule

role="combobox" + aria-expanded + aria-controls + aria-activedescendant.

The full Combobox contract has 5 more rules, plus the do-not patterns. Get the full recipe.

Related

Get the Combobox contract in your project.