shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Standard
Full Width Variant Combobox for React
A combobox whose button and list stretch to the width of their container.
A country picker that fills its column. The button takes w-full, and the list opens at the button's width, so the combobox lines up with the other inputs in a form. Use it in form layouts, side panels and on narrow screens where fixed widths look out of place.
Preview
Installation
FAQ
Which classes make it full width?
A wrapper div with w-full, and w-full justify-between on the trigger so the label sits at the start and the chevron at the end.
How does the list match the button's width?
ComboboxContent reads the width of the element it's anchored to, so a wider button gives a wider list without a width class on the popup.
What can I select?
United States, United Kingdom, Canada, Australia and Germany. The search box says Search country..., and No country found. shows when nothing matches.
Related
- Simple Single Select ComboboxA single-select combobox that opens from
- Small Size Variant ComboboxA compact combobox with a small button
- Large Size Variant ComboboxA large combobox with a taller button and
- With Default Selected Value ComboboxA combobox that starts with English
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- Disabled State ComboboxA disabled combobox that shows its