Combobox
Search a long list and pick one value, or several.
When to use it
Use Combobox when the list is too long to scan: countries, people, labels, repositories. Typing narrows it to a few matches.
Turn on multiple to collect several values as chips, such as tags or teammates to invite.
Radio Group
One choice, every option visible.
Visibility
Only you can see this project.
Everyone on the Design team can view and edit.
Anyone in the workspace can find it.
Two to five options worth comparing.
ComboboxThis page
A long list, searched.
Countries, people, and tags.
How it behaves
Pass items to Combobox and render them with ComboboxList; Base UI filters them as you type. Use value/onValueChange or defaultValue, and multiple for several values.
ComboboxInput is an Input Group with a chevron trigger; showClear adds a clear button. For many values, use ComboboxChips with ComboboxValue, ComboboxChip, and ComboboxChipsInput, and anchor the popup to the chips with useComboboxAnchor.
Like Select, a leading checkmark marks the selected value. Group items as { value, items } with ComboboxGroup, ComboboxLabel, and ComboboxCollection.
Use Select for short fixed lists and Combobox once people need to search. Label the input; arrow keys move the highlight, Enter chooses it, and Escape closes the list.
Build it
Add it with the shadcn CLI:
1pnpm dlx shadcn@latest add https://jzbui.com/r/combobox.jsonA complete example. Change the values to fit your product:
123456789101112131415161718192021import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList} from "@/components/ui/combobox"
const cities = ["New York", "London", "Tokyo", "Sydney"]
<label htmlFor="timezone">Timezone</label><Combobox items={cities} defaultValue="London"> <ComboboxInput id="timezone" placeholder="Search cities" showClear /> <ComboboxContent> <ComboboxEmpty>No cities found.</ComboboxEmpty> <ComboboxList> {(city) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>} </ComboboxList> </ComboboxContent></Combobox>The full source is yours to edit once installed: