shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Dropdown
Search Filters Input Group for React
A product search with a Category menu at its end.
Narrow a search without another control on the page: a Category Dropdown Menu sits at the end of the search field with All Products, Electronics and Clothing. The group's radius is set to 1rem and the menu's to 0.95rem so their corners match.
Preview
Installation
FAQ
How is the Category button built?
An InputGroupButton with text-xs and a small chevron after the label. DropdownMenuTrigger renders the InputGroupButton through render.
Why does the trigger have pe-1.5!?
It trims the end padding so the chevron sits close to the group's rounded edge. The ! makes it win over the button's own padding.
What do the --radius classes do?
[--radius:1rem] on InputGroup and [--radius:0.95rem] on the menu change the radius token for each part, so the field and its menu round alike. The menu's class goes on DropdownMenuContent.
Where does the menu open?
Under the button, aligned to its end. align="end" on DropdownMenuContent place it.
Related
- Dropdown Actions Input GroupA file name input with a more-actions
- URL Builder with Dropdown Input GroupTwo URL inputs, one with a protocol menu
- Search InputA search field with a magnifier icon
- Simple Single Select ComboboxA single-select combobox that opens from
- Search with Icon Input GroupA search input with a magnifying glass at
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an