Component

Combobox

Autocomplete input with a filtered dropdown list. Supports single and multiple selection (with chips), groups, custom item rendering and async-style filtering.

itemsarray of options — required

sizesm · md (default) · lg · xl — matches Button/Input heights

multipleenables multi-select with ComboboxChips

itemToStringValueextract filterable text from object items

autoHighlight / showClear / disabledbehavior toggles

Playground

Size— size

Show clear button— showClear

Auto highlight first item— autoHighlight

Disabled— disabled

Basic — single select

Sizes

h-7 · 28px

default

h-8 · 32px

h-9 · 36px

h-11 · 44px — matches Button xl

Clear button

Multiple selection — chips

Next.js

Astro

Grouped items

Custom item objects — itemToStringValue

With input addon

Custom trigger — button

States

disabled

invalid

RTL support

Next.js

Tokens used

10 semantic tokens consumed by this component.

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--accentAccent

bg-accenttext-accentborder-accent

--accent-foregroundAccent Foreground

text-accent-foreground

--mutedMuted

bg-mutedtext-mutedborder-muted

--muted-foregroundMuted Foreground

text-muted-foreground

--borderBorder

border-borderborder

--inputInput

bg-inputborder-input

--ringRing

ring-ringring

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive