shadcn.io is not affiliated with official shadcn/ui
Field examples · Layouts
Responsive Layout Field for React
Two fields that stack in a narrow container and sit beside their labels in a wide one.
One form for phones and desktops. orientation="responsive" on each Field stacks the label over the input in a narrow container and puts them side by side once the FieldGroup is wide enough. It's a container query, so it follows the form's width, not the screen's.
Preview
Installation
FAQ
When do these labels move beside the inputs?
orientation is responsive on each Field. The label stacks over the input until the FieldGroup container reaches the @md/field-group size, then the label and input share a row.
Why are both fields inside FieldGroup?
The @md switch is a container query on FieldGroup, so responsive fields belong inside that group. This demo wraps Display Name and Username in one FieldGroup capped with max-w-md.
What is in each field?
Each field is a FieldLabel and an Input with type text. The placeholders are John Doe and @johndoe. There is no FieldDescription.
How do the labels connect?
FieldLabel names that input. Its htmlFor matches the control's id. The labels are Display Name and Username.
Related
- Vertical Layout (Default) FieldTwo stacked fields, each with its label
- Horizontal Layout FieldAn input and a select, each with its
- Mixed Orientations FieldA vertical input, a horizontal switch
- Simple Select FieldA country select with a label and a
- Select in Horizontal Layout FieldA theme select with its label beside it
- Standard DialogA share dialog with a read-only link, a