shadcn.io is not affiliated with official shadcn/ui
Field examples · Advanced
Complex Multi-Field Form for React
A personal information fieldset with name, email and country fields.
A form section that mixes control types and widths: First Name and Last Name share a two-column row, then Email and a Country Select take the full width. A FieldSet with a FieldLegend captions the group and a FieldGroup spaces the fields. Use it for sign-up, checkout and profile forms.
Preview
Installation
FAQ
What is the Personal Information line?
FieldLegend on FieldSet is the caption, in the default legend style. FieldGroup stacks the rows under it. There is no FieldDescription on the set.
How do First Name and Last Name share a row?
They sit in a grid with grid-cols-2 and gap-4. Both inputs use type text, with placeholders John and Doe.
How is Email different from the name row?
Email is its own full-width Field under the grid. type is email, and the placeholder is john@example.com.
What does the country select show before a choice?
The trigger shows the placeholder Select country. It's the placeholder on SelectValue. The items are United States, United Kingdom, and Canada, each a SelectItem.
Related
- Fieldset with LegendAn address fieldset with a legend, a
- Mixed Field Types with SeparatorsA contact fieldset and a textarea divided
- Accordion Form with Icon SectionsA form split into personal, contact and
- Right Drawer Filter PanelA right drawer of product filters
- Choice Cards FieldRadio choice cards, each a bordered row
- Field Group with SeparatorTwo notification fieldsets of checkboxes