shadcn.io is not affiliated with official shadcn/ui
Field examples · Selects
Select with Helper Text Above Field for React
A priority select with helper text between the label and the trigger.
Framework
UI library
Explain the options before people open the list. The FieldDescription sits between the Priority Level label and the Select, so the guidance is read first.
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
Why is the helper text above the select?
FieldDescription sits between FieldLabel and Select. It reads Higher priority items will be processed first.
What shows before a priority is chosen?
The placeholder Select priority shows until an item is selected. It's the placeholder on SelectValue.
How does Priority Level connect to the select?
FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label text is Priority Level.
Related
- Select with Description FieldA department select with a placeholder
- Simple Select FieldA country select with a label and a
- Select with Groups FieldA timezone select whose options are
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Info with Title AlertAn info alert with only a title, for a
- Input with LabelA text input with a label above it