shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Advanced
Button Group with Select for React
Compound fields that join a select to fixed text, a country before a phone number and a protocol before a domain.
A select joined to a piece of text, for values that come in two parts. The first group picks a country, 🇺🇸 US, 🇬🇧 UK or 🇪🇺 EU, in front of a phone number; the second picks https:// or http:// in front of a domain. The first select is controlled, the second keeps its own value.
Preview
Installation
FAQ
How is the country select controlled?
The demo keeps the country, starting at us, and updates it when the select changes.
Why does the protocol select have no state?
It starts on https with a default value and keeps its own selection. Read it on submit, or control it like the country select.
Is the phone number editable?
No. ButtonGroupText is fixed text that shares the group's border. Put an Input in its place for a real phone or domain field.
How are the selects named?
With aria-label, Country and Protocol, since they have no visible label. The label goes on SelectTrigger.
Related
- Stepper Button GroupTwo steppers with a number field between
- Basic Button GroupThree rows of outline buttons joined into
- Input with LabelA text input with a label above it
- Simple Single Select ComboboxA single-select combobox that opens from
- Rich Text Toolbar Button GroupA rich text toolbar of icon buttons where
- Split Button with Dropdown Button GroupSplit buttons for Fork and Star, each a