shadcn.io is not affiliated with official shadcn/ui
Field examples · Selects
Select with Default Value Field for React
An account status select that opens on Active, with a description below.
A Select that already has an answer, for fields with a sensible default. Status opens on Active, with no placeholder, and a FieldDescription under it says what the value is.
Preview
Installation
FAQ
How does Status open on Active?
The trigger shows the selected label, and this select has no placeholder. The items are Active, Pending, Suspended, and Inactive.
Set defaultValue to active.
Where is the helper text?
FieldDescription comes after the Select and reads Current account status. The label Status comes first.
How does the Status label connect?
FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label text is Status.
Where do the four statuses go?
Active, Pending, Suspended, and Inactive are SelectItems. Opening the select shows that list, and the trigger keeps the selected label.
Related
- Simple Select FieldA country select with a label and a
- Multiple Selects FieldLanguage and currency selects stacked in
- Select in Horizontal Layout FieldA theme select with its label beside it
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Default SwitchA switch in its default off state, with
- Simple CheckboxA checkbox with a label for a single