shadcn.io is not affiliated with official shadcn/ui
Field examples · Selects
Select with Description Field for React
A department select with a placeholder and a description below.
Framework
UI library
A Select with a prompt and a note: Choose department shows until someone picks one, and a FieldDescription under the trigger asks for a department or area of work.
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
Where does the helper text sit?
The order is FieldLabel, Select, then FieldDescription. The description reads Select your department or area of work.
What shows before a department is chosen?
The placeholder Choose department shows until an item is selected. It's the placeholder on SelectValue.
Which departments are in the list?
The items are Engineering, Design, Marketing, Sales, Customer Support, and Human Resources, each a SelectItem.
How does the Department label connect?
FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label text is Department.
Related
- Simple Select FieldA country select with a label and a
- Select with Helper Text Above FieldA priority select with helper text
- Select with Groups FieldA timezone select whose options are
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Input with LabelA text input with a label above it
- Simple Single Select ComboboxA single-select combobox that opens from