Combobox

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

Import

tsx

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

Default

A searchable dropdown that filters options as the user types.

tsx

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

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

Disabled Options

Individual options can be marked disabled — they appear at reduced opacity 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..."
/>

Controlled

Manage the selected value externally with value and onChange — the display reflects the matching option label.

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	"Search…"	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.
style	ViewStyle	-	Additional styles applied to the outer container.