shadcn.io is not affiliated with official shadcn/ui
Field examples · Basic Inputs
Multiple Inputs in Group Field for React
First name, last name and email inputs stacked in a field group.
The simplest form layout: a FieldGroup of three Fields, each a label above an input. The group sets the spacing between fields, so the form needs no margin classes of its own.
Preview
Installation
FAQ
What stacks First Name, Last Name, and Email?
One FieldGroup stacks three Fields. Each field is a FieldLabel and an Input, and the group is capped with max-w-md.
What input types does this group use?
First Name and Last Name use type text, with placeholders John and Doe. Email uses type email, with placeholder john@example.com.
How does each label connect to its input?
FieldLabel names the input. Its htmlFor matches the control's id. The three labels are First Name, Last Name, and Email.
Why are the labels above the inputs?
None of the fields set orientation, so each one stays vertical. The label stacks over its input.
Related
- Simple Input with Label FieldAn email input with its label above it
- Complex Multi-Field FormA personal information fieldset with
- Fieldset with LegendAn address fieldset with a legend, a
- Field Group with SeparatorTwo notification fieldsets of checkboxes
- Accordion Form with Icon SectionsA form split into personal, contact and
- Horizontal Layout Input FieldAn input with its label beside it in a