Combobox

A searchable select input that allows users to filter and choose from a list of options.

Import

tsx

import { Combobox } from '@tac-ui/web';

Default

A searchable dropdown that filters options as the user types. Supports keyboard navigation with Arrow keys, Enter to select, and Escape to close.

tsx

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

<Combobox
  options={frameworkOptions}
  value={value}
  onChange={setValue}
  placeholder="Select a framework..."
  emptyText="No framework found."
/>

With Label

Pair the Combobox with a Label component using matching htmlFor and id props for accessible labeling.

Country

tsx

<div className="flex flex-col gap-1.5">
  <label htmlFor="country" className="text-sm font-medium text-[var(--foreground)]">Country</label>
  <Combobox
    id="country"
    options={countryOptions}
    value={value}
    onChange={setValue}
    placeholder="Search countries..."
  />
</div>

Disabled Options

Individual options can be marked disabled — they appear at reduced opacity, are not keyboard-focusable, and cannot be selected.

tsx

<Combobox
  options={[
    { label: 'React', value: 'react' },
    { label: 'Vue', value: 'vue', disabled: true },
    { label: 'Angular', value: 'angular', disabled: true },
    { label: 'Svelte', value: 'svelte' },
  ]}
  placeholder="Select a framework..."
/>

Disabled

The disabled prop (via HTML input attribute) prevents interaction with the entire component, rendering it at reduced opacity with a not-allowed cursor.

tsx

<Combobox
  disabled
  options={frameworkOptions}
  placeholder="Select a framework..."
/>

Controlled

Manage the selected value externally with value and onChange — the display reflects the matching option label and resets to search mode on focus.

Selected value: react

tsx

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

<Combobox
  options={frameworkOptions}
  value={value}
  onChange={setValue}
  placeholder="Select a framework..."
/>

API Reference

Prop	Type	Default	Description
options	ComboboxOption[]	-	Array of { label, value, disabled? } option objects to display and filter.
value	string	-	Controlled selected value. The matching option label is displayed in the input.
onChange	(value: string) => void	-	Called when the user selects an option from the dropdown.
placeholder	string	-	Placeholder text shown in the input when no value is selected.
emptyText	string	"No results found"	Text displayed in the dropdown when no options match the search query.
id	string	-	HTML id for the input element, auto-generated if omitted. Use with Label htmlFor for accessibility.
disabled	boolean	false	Disables the input, blocking all interaction and showing a not-allowed cursor.
className	string	-	Additional CSS class names applied to the input element.