shadcn.io is not affiliated with official shadcn/ui
Field examples · Advanced
Field Group with Separator for React
Two notification fieldsets of checkboxes divided by a separator.
Settings split into sections, each with its own caption and explanation. Two FieldSets of Checkbox rows, Responses and Tasks, sit in one FieldGroup with a FieldSeparator between them. The Responses push notification is checked and disabled to show a setting people can't turn off.
Preview
Installation
FAQ
What draws the line between Responses and Tasks?
FieldSeparator with no children sits between the two FieldSets, inside one FieldGroup. With nothing passed in, the separator is the rule.
What are the Responses and Tasks lines?
Each section has a FieldDescription under its caption. Responses explains notifications for requests that take time, such as research or image generation.
The caption is a FieldLegend with variant set to label.
Why can't Responses push be turned off?
That checkbox starts checked and is disabled, so it stays on. It sets defaultChecked and disabled. The Tasks checkboxes do not set either prop.
How are the checkbox rows built?
Each option is a horizontal Field: Checkbox first, then FieldLabel with font-normal. Tasks lists Push notifications and Email notifications.
Related
- Fieldset with LegendAn address fieldset with a legend, a
- Mixed Field Types with SeparatorsA contact fieldset and a textarea divided
- Right Drawer Settings PanelA right drawer of settings switches
- Dropdown with Groups and Labels Dropdown MenuA menu split into labeled My Account and
- Standard Accordion with ChevronA bordered accordion of three questions
- Complex Multi-Field FormA personal information fieldset with