Combobox

A Select you can type into. The search box lives inside the panel rather than replacing the trigger, so the chosen value stays visible while you filter.

src/components/ui/combobox.tsx

About

From the component's own source, where it was written.

The same three treatments Input and Select offer.

Install

npx astralyx-ui add combobox

Usage

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

<Combobox options={frameworks} onValueChange={setFramework} />

Composer

Change the props and the source below follows.

Props

size

placeholder

errordisabled

tsx

<Combobox
  options={frameworks}
  size="md"
  placeholder="Select framework…"
  onValueChange={setValue}
/>

Examples

Searchable select

tsx

<Combobox options={frameworks} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Combobox`

Extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'>.

Prop	Type	Default	Description
options	ComboboxOption[]	required	The choices. Filtering matches on label, case-insensitively.
value	string	—	Controlled and uncontrolled selection.
defaultValue	string	—	Controlled and uncontrolled selection.
onValueChange	(value: string) => void	—	Fires with the chosen value.
placeholder	string	'Select…'	—
searchPlaceholder	string	'Search…'	Text inside the panel.
emptyMessage	string	'No results'	Text inside the panel.
size	keyof typeof fieldSize	'md'	Same steps as Input and Select.
variant	'default' \| 'secondary' \| 'ghost'	'default'	Matches Input and Select, so a form can be uniform.
disabled	boolean	false	—
error	boolean	false	—

Types

`ComboboxOption`

Field	Type	Description
value	string	—
label	string	—
disabled?	boolean	—