shadcn.io is not affiliated with official shadcn/ui
Field examples · Selects
Simple Select Field for React
A country select with a label and a placeholder.
Framework
UI library
A Select for one choice from a known list: a Country label above a trigger that shows Select a country until someone picks United States, United Kingdom, Canada, Australia or Germany.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How does the Country label connect to the select?
FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label text is Country, stacked above the trigger.
What shows before a country is chosen?
The placeholder Select a country shows until an item is selected. It's the placeholder on SelectValue.
Where do the countries go?
Each country is a SelectItem: United States, United Kingdom, Canada, Australia, and Germany.
Related
- Select with Description FieldA department select with a placeholder
- Select with Groups FieldA timezone select whose options are
- Multiple Selects FieldLanguage and currency selects stacked in
- Select in Horizontal Layout FieldA theme select with its label beside it
- Simple Single Select ComboboxA single-select combobox that opens from
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an