shadcn.io is an independent project built on shadcn/ui
Display Name and Username, placeholders John Doe and @johndoe. In a narrow group the label sits above the field. Once the group is wide enough, the label sits beside it.
Keep it for one form that should work in a sidebar and on a full page. A label that never moves is a Label. The row follows the group's width, and Ark UI on React does not follow the window.
Installation
Anatomy
Usage
<FieldGroup className="max-w-md">
<Field orientation="responsive">
<FieldLabel>Display Name</FieldLabel>
<Input placeholder="John Doe" type="text" />
</Field>
<Field orientation="responsive">
<FieldLabel>Username</FieldLabel>
<Input placeholder="@johndoe" type="text" />
</Field>
</FieldGroup>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. Field connects the two for you, with no ids to write. The labels are Display Name and Username.
API Reference
Field
Sets orientation="responsive". The rest is on the Field page.
Input
Sets placeholder="John Doe", type="text" and placeholder="@johndoe". The rest is on the Input page.
