shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Standard
Small Size Variant Combobox for React
A compact combobox with a small button and text for dense layouts.
A status picker sized down. The button uses the small size and text-xs, and the options use text-xs too, so it fits toolbars, table rows and filter bars. Use it where a default-size field would crowd the row.
Preview
Installation
FAQ
What makes this one small?
size="sm" on the outline button, with text-xs and a fixed w-[150px].
They're props of the Button the trigger renders.
What are the statuses?
To Do, In Progress, Done and Canceled. The search box says Search status..., and No status found. shows when nothing matches.
How wide is the list?
It opens at about the width of the button. For longer labels, widen the trigger rather than the popup, so the two stay aligned.
Is the small size fine on touch screens?
It's a smaller target, so keep it for dense desktop views. On touch-first screens use the default or the large size.
Related
- Large Size Variant ComboboxA large combobox with a taller button and
- Simple Single Select ComboboxA single-select combobox that opens from
- Full Width Variant ComboboxA combobox whose button and list stretch
- With Item Icons ComboboxA combobox with an icon beside each
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- Disabled State ComboboxA disabled combobox that shows its