forms

Combobox

Example

Import

import { Combobox } from '@connor-adams/designsystem'

Usage

A searchable single-select for long option lists (assign a category, pick a payee, choose an account). For a handful of fixed options use NativeSelect.

<Combobox
  options={[
    { value: 'groceries', label: 'Groceries' },
    { value: 'dining', label: 'Dining' },
    { value: 'transport', label: 'Transport' },
  ]}
  defaultValue="groceries"
  placeholder="Assign category…"
  onValueChange={setCategory}
/>

Variants: size="sm|default", placeholder, emptyText. Options accept a hint for a right-aligned note.

Props

Prop	Type	Default
options	ComboboxOption[]	[]
value	string \| null \| undefined	—
defaultValue	string \| null \| undefined	null
onValueChange	((value: string) => void) \| undefined	—
placeholder	string \| undefined	Search…
emptyText	string \| undefined	No matches
size	"sm" \| "default" \| undefined	default