shadcn.io is not affiliated with official shadcn/ui
Field examples · Toggles
Multiple Checkboxes Field for React
A fieldset of four checkboxes for the items shown on the desktop.
A list of independent options under one question. A FieldSet with a label-style FieldLegend and a FieldDescription holds four horizontal Fields, each a Checkbox and its FieldLabel. Hard disks starts checked.
Preview
Installation
FAQ
What is the desktop line above the boxes?
FieldLegend with variant set to label is the question on the FieldSet: Show these items on the desktop. FieldDescription under it reads Select the items you want to show on the desktop.
How is each checkbox laid out?
Each option is a Field with orientation set to horizontal. The Checkbox comes first, then a FieldLabel with font-normal.
Which box starts checked?
Hard disks. External disks, CDs, DVDs, and iPods, and Connected servers pass no default, so they start off. Hard disks sets defaultChecked.
Can more than one box be checked?
Yes. Each checkbox is its own control, so any combination can be on. The FieldGroup stacks them with gap-3.
Related
- Simple Checkbox FieldA terms and conditions checkbox with its
- Checkbox with Description FieldA checked checkbox with a label and a
- Radio with Descriptions FieldA subscription plan fieldset of radio
- Fieldset with LegendAn address fieldset with a legend, a
- Complex Multi-Field FormA personal information fieldset with
- Multiple Inputs in Group FieldFirst name, last name and email inputs