All componentsoutlinesubtleflushedxssmmdlg
Combobox
Filterable input with a suggestion popup, item indicators, and an empty state slot.
Amsterdam
Berlin
Lisbon
Oslo
Porto
Variants
Amsterdam
Berlin
Lisbon
Oslo
Porto
Amsterdam
Berlin
Lisbon
Oslo
Porto
Amsterdam
Berlin
Lisbon
Oslo
Porto
Sizes
Amsterdam
Berlin
Lisbon
Oslo
Porto
Amsterdam
Berlin
Lisbon
Oslo
Porto
Amsterdam
Berlin
Lisbon
Oslo
Porto
Amsterdam
Berlin
Lisbon
Oslo
Porto
Install
zsh — combobox
1bunx stylexblocks add comboboxUsage — Ark UI
combobox.tsx
12345678910111213141516171819202122232425262728293031323334353637383940import { useMemo, useState } from "react";import { Combobox, createListCollection } from "#components/ui/ark-ui/combobox.tsx";
const cities = ["Amsterdam", "Berlin", "Lisbon", "Oslo", "Porto"];
export function Example() { const [items, setItems] = useState(cities); const collection = useMemo(() => createListCollection({ items }), [items]); return ( // variant/size resolve once on Root; every part inherits them via // context — IndicatorGroup and ItemIndicator ship default icons <Combobox.Root collection={collection} onInputValueChange={(d) => setItems(cities.filter((c) => c.toLowerCase().includes(d.inputValue.toLowerCase()))) } openOnClick variant="outline" size="md" > <Combobox.Label>City</Combobox.Label> <Combobox.Control> <Combobox.Input placeholder="Search cities" /> <Combobox.IndicatorGroup /> </Combobox.Control> {/* Positioner portals the panel and positions it under the input */} <Combobox.Positioner> <Combobox.Content> {collection.items.map((city) => ( <Combobox.Item key={city} item={city}> <Combobox.ItemText>{city}</Combobox.ItemText> <Combobox.ItemIndicator /> </Combobox.Item> ))} {collection.items.length === 0 ? <Combobox.Empty>No matches</Combobox.Empty> : null} </Combobox.Content> </Combobox.Positioner> </Combobox.Root> );}