Combobox

Forms

Selection

Searchable select component with keyboard navigation, option descriptions, and optional create functionality. Ideal for selecting from large option lists.

Preview

Searchable select with options and descriptions

Select Framework

Creatable

Allow creating new options on the fly

Loading State

Show loading indicator while fetching options

Disabled State

Disabled with and without value

Disabled with value

Disabled without value

Props

Combobox component API reference

Prop	Type	Default	Description
`options`	`ComboboxOption[]`	`[]`	Array of options to display
`value`	`string`	—	Selected option value
`onChange`	`(value: string \| null) => void`	—	Callback when selection changes
`label`	`string`	—	Label text above input
`placeholder`	`string`	`'Search...'`	Placeholder text
`emptyText`	`string`	`'No results found'`	Text when no options match
`clearable`	`boolean`	`true`	Allow clearing selection
`creatable`	`boolean`	`false`	Allow creating new options
`onCreate`	`(option: ComboboxOption) => void`	—	Callback when creating new option
`loading`	`boolean`	`false`	Show loading indicator
`disabled`	`boolean`	`false`	Disable the combobox

ComboboxOption Type

Prop	Type	Default	Description
`value*`	`string`	—	Option value
`label*`	`string`	—	Display label
`description`	`string`	—	Optional description text

Usage

Import and implementation example

import { Combobox, ComboboxOption } from '@/components/ui/combobox'

const options: ComboboxOption[] = [
  { value: 'react', label: 'React', description: 'A JavaScript library' },
  { value: 'vue', label: 'Vue.js', description: 'Progressive framework' },
  { value: 'angular', label: 'Angular', description: 'Platform for apps' },
]

export default function Example() {
  const [value, setValue] = useState<string | null>(null)
  const [options, setOptions] = useState(initialOptions)

  return (
    <>
      {/* Basic usage */}
      <Combobox
        label="Framework"
        options={options}
        value={value}
        onChange={setValue}
        placeholder="Search frameworks..."
      />

      {/* Creatable */}
      <Combobox
        label="Tags"
        options={options}
        value={value}
        onChange={setValue}
        creatable
        onCreate={(opt) => setOptions([...options, opt])}
      />
    </>
  )
}

Features

Built-in functionality

Real-time search: Filter options as you type
Keyboard navigation: Arrow keys, Enter, and Escape support
Option descriptions: Secondary text for additional context
Create new options: Add options that dont exist
Clear selection: One-click to clear current selection
Loading state: Spinner while fetching options
ARIA compliant: Full combobox ARIA pattern implementation
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="combobox" on inputrole="listbox" on options containerrole="option" on each optionaria-expanded indicates dropdown statearia-activedescendant tracks highlighted option

Keyboard Navigation

Key	Action
`Arrow Down`	Open dropdown / Move to next option
`Arrow Up`	Move to previous option
`Enter`	Select highlighted option
`Escape`	Close dropdown

Notes

Options highlighted on hover and keyboard focus
Selected option shows checkmark indicator
Empty state announced to screen readers
Create option available via keyboard

Related Components

Select Searchable Select Cascader Autocomplete