All components
Combobox
Filterable input with a suggestion popup, item indicators, and an empty state slot.
City
Variants
City
outlineCity
subtleCity
flushedSizes
City
xsCity
smCity
mdCity
lgInstall
zsh — combobox
1bunx stylexblocks add comboboxUsage — Base UI
combobox.tsx
12345678910111213141516171819202122232425262728293031import { Combobox } from "#components/ui/base-ui/combobox.tsx";
const cities = ["Amsterdam", "Berlin", "Lisbon", "Oslo", "Porto"];
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — IndicatorGroup and ItemIndicator ship default icons <Combobox.Root items={cities} variant="outline" size="md"> <Combobox.Label>City</Combobox.Label> <Combobox.Control> <Combobox.Input placeholder="Search cities" /> <Combobox.IndicatorGroup /> </Combobox.Control> {/* Positioner portals the popup and positions it under the input */} <Combobox.Positioner> <Combobox.Popup> <Combobox.Empty>No matches</Combobox.Empty> <Combobox.List> {(city) => ( <Combobox.Item key={city} value={city}> <Combobox.ItemText>{city}</Combobox.ItemText> <Combobox.ItemIndicator /> </Combobox.Item> )} </Combobox.List> </Combobox.Popup> </Combobox.Positioner> </Combobox.Root> );}