Combobox

Searchable select built on Popover with real-time filtering, keyboard navigation, and accessible ARIA attributes.

Live Demo

Props

Prop	Type	Default	Description
`options`	`{ value, label, disabled? }[]`	`[]`	Array of { value, label, disabled? } objects.
`value`	`string`	`—`	Controlled selected value.
`onChange`	`(value: string) => void`	`—`	Callback when value changes.
`placeholder`	`string`	`'Select...'`	Placeholder text for the trigger button.
`searchPlaceholder`	`string`	`'Search...'`	Placeholder for the search input.
`emptyText`	`string`	`'No results found.'`	Text shown when no options match the search.
`disabled`	`boolean`	`false`	Disables the combobox.

Usage

import { Combobox } from '@ghiberti85/ui'

const [value, setValue] = useState('')

<Combobox
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte', disabled: true },
  ]}
  value={value}
  onChange={setValue}
  placeholder="Select a framework..."
  searchPlaceholder="Search..."
  emptyText="No results found."
/>

View in Storybook

Open in Storybook →

←AlertDialog Breadcrumb→