shadcn.io is not affiliated with official shadcn/ui
Field examples · Layouts
Horizontal Layout Field for React
An input and a select, each with its label beside it.
A compact settings form where every label sits beside its control. Both Fields set orientation="horizontal": a Username input and a Language Select that opens on English. Stack more rows in the same FieldGroup for a preferences panel.
Preview
Installation
FAQ
How do the labels sit beside the controls?
Both fields set orientation to horizontal inside one FieldGroup. Username is an Input, and Language is a Select, each with its FieldLabel first.
What does the username field accept?
type is text, and the placeholder is johndoe. FieldLabel names the input Username. Its htmlFor matches the control's id.
Which language is selected at first?
There is no placeholder, because a value is already selected. The items are English, Spanish, and French.
Set defaultValue to en.
Where do the language options go?
Each language is a SelectItem. The trigger shows the selected label.
Related
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Responsive Layout FieldTwo fields that stack in a narrow
- Mixed Orientations FieldA vertical input, a horizontal switch
- Select in Horizontal Layout FieldA theme select with its label beside it
- Theme Selector Dropdown MenuA theme picker behind a palette button
- Default SwitchA switch in its default off state, with