shadcn.io is not affiliated with official shadcn/ui
Field examples · Advanced
Fieldset with Legend for React
An address fieldset with a legend, a description and three inputs.
Group related inputs under one caption. A FieldSet with a FieldLegend (Address Information) and a FieldDescription holds Street Address on its own row, then City and Postal Code side by side. The fieldset and legend give the group its name for screen readers as well as on screen.
Preview
Installation
FAQ
What is the Address Information line?
FieldLegend on FieldSet is the caption. variant is left unset, so it uses the default legend style. The legend is announced with each field's own label.
Where is the delivery sentence?
FieldDescription sits under the legend, on the set: We need your address to deliver your order. The inputs have their own labels under that.
How is the street field laid out?
Street Address is a full-width Field in the FieldGroup. type is text, and the placeholder is 123 Main St.
How do City and Postal Code share a row?
They sit in a grid with grid-cols-2 and gap-4. Placeholders are New York and 90502, and both inputs use type text.
Related
- Complex Multi-Field FormA personal information fieldset with
- Field Group with SeparatorTwo notification fieldsets of checkboxes
- Accordion Form with Icon SectionsA form split into personal, contact and
- Mixed Field Types with SeparatorsA contact fieldset and a textarea divided
- Choice Cards FieldRadio choice cards, each a bordered row
- Range Slider FieldA two-thumb price range slider whose