shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Dropdown
URL Builder with Dropdown Input Group for React
Two URL inputs, one with a protocol menu before it and one with a domain menu after it.
Build a URL from parts people pick and parts they type. The first field has an https:// Dropdown Menu at its start with https:// and http://; the second has a .com menu at its end with .com, .net, .org and .io.
Preview
Installation
FAQ
How does the protocol menu sit before the input?
Its InputGroupAddon keeps the default align, inline-start, which places it before the input. In the code it still comes after the input, as every addon does.
How are the menu buttons built?
Each trigger is a ghost InputGroupButton with text-xs, the current value and a small chevron. DropdownMenuTrigger renders the InputGroupButton through render.
Where do the menus open?
Each opens under its button, aligned to the edge it sits on: start for the protocol, end for the domain.
Related
- Dropdown Actions Input GroupA file name input with a more-actions
- Search Filters Input GroupA product search with a Category menu at
- URL InputA website field with a link icon and a
- Currency Input Input GroupDollar and euro amount inputs with the
- Simple Single Select ComboboxA single-select combobox that opens from
- Input with LabelA text input with a label above it