shadcn.io is not affiliated with official shadcn/ui
Field examples · Selects
Select with Groups Field for React
A timezone select whose options are grouped by region under headings.
A long list made scannable. The timezone Select splits its options into North America and Europe, each a group with a heading, and a FieldDescription under the trigger.
Preview
Installation
FAQ
How are the timezones split into regions?
Two SelectGroups divide the list. North America holds Eastern, Central, Mountain, and Pacific. Europe holds London, Central Europe, and Eastern Europe.
The region name is a SelectLabel inside the group.
What shows before a timezone is chosen?
The placeholder Select timezone shows until an item is selected. It's the placeholder on SelectValue.
Where is the helper text?
FieldDescription comes after the Select and reads Choose your local timezone. FieldLabel above the select is Timezone.
How does the Timezone label connect?
FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The group headings organize the items under that label.
Related
- Simple Select FieldA country select with a label and a
- Select with Description FieldA department select with a placeholder
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Simple Command MenuAn inline command menu with a search
- Standard Accordion with ChevronA bordered accordion of three questions