A basic combobox with a list of options
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: The minimal single pick wiring: a string array filtered by typing, with a no results message
When to use
- Form fields that pick one option by typing to search, such as a framework, timezone or country
- Fields holding several picks as chips, such as frameworks or team members with avatars
- Task property pickers opened from a button, such as status, priority, assignee, labels, team or due date
When not to use
- Options sorted under headings such as world regions: use the Combobox Grouped Options example
- A short fixed list chosen from a button, with no typing to narrow it: use the Select component
- A free text field that suggests matches but keeps whatever was typed: use the Autocomplete component
- A complete signup or settings page with many fields and a submit row: use the Form blocks
Agent notes
- Rows filter as the user types only when the function child of
ComboboxListrenders them; staticComboboxItemchildren always stay listed itemToStringValuesets only the submitted value; without itemToStringLabel, search matches an object item's label, else its value field, else its JSON- Combobox parts take
renderin both twins, since both wrap@base-ui/react;asChildapplies only to radix twin parts such asDialogTriggerandButton
https://reui.io/components/combobox/c-combobox-1.mdget_example("c-combobox-1")npx shadcn@latest add @reui/c-combobox-1About Shadcn Combobox Basic
A basic combobox with a list of options. Built by composing Combobox, Field. A free, open source shadcn combobox example you can install with npx shadcn@latest add @reui/c-combobox-1 and edit as your own code.
What You Can Build With Shadcn Combobox Basic
- Composes Combobox, Field, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-combobox-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Combobox Examples
- Disabled A disabled combobox
- Invalid A combobox in an invalid state
- Clear Button A combobox with a clear button
- Auto-Highlight A combobox with auto-highlight enabled
- Grouped Options A combobox with grouped options
- Group Separators A combobox with grouped options and separators
- Large List A combobox with a large list of options
- Icon Addon A combobox with an icon addon
- Country Picker A combobox rendered inside a popup
- In Form A combobox used within a form
- Multi-Select A multi-select combobox
- Disabled Multi-Select A disabled multi-select combobox
Related Shadcn Component Categories
Open-source shadcn command menu components for command palettes, global search, and power-user navigation.
Open-source shadcn context menu components for right-click menus, file actions, and table row actions.
Open-source shadcn data grid components for sorting and filtering, virtualized tables, and admin dashboards.
Open-source shadcn date selector components for date range picking, booking windows, and calendar filters.
Open-source shadcn dialog components for modal forms, focused tasks, and confirmations.
Open-source shadcn drawer components for mobile panels, slide-over forms, and secondary workflows.
Frequently Asked Questions
When should I use Shadcn Combobox Basic?
Use it for the minimal single pick wiring: a string array filtered by typing, with a no results message.
Shadcn Combobox as a whole fits:
- Form fields that pick one option by typing to search, such as a framework, timezone or country
- Fields holding several picks as chips, such as frameworks or team members with avatars
- Task property pickers opened from a button, such as status, priority, assignee, labels, team or due date
For options sorted under headings such as world regions, use the Combobox Grouped Options example. For a short fixed list chosen from a button, with no typing to narrow it, use the Select component. For a free text field that suggests matches but keeps whatever was typed, use the Autocomplete component. For a complete signup or settings page with many fields and a submit row, use the Form blocks.
How do I install Shadcn Combobox Basic?
Is Shadcn Combobox Basic free to use?
Which components does Shadcn Combobox Basic use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.