shadcn.io is not affiliated with official shadcn/ui
Field examples · Toggles
Checkbox with Description Field for React
A checked checkbox with a label and a longer description beside it.
A checkbox whose label needs a sentence of explanation, like a sync setting. The Field is horizontal with the Checkbox first, and FieldContent stacks the FieldLabel and the FieldDescription beside it, so the box lines up with the label's first line.
Preview
Installation
FAQ
How are the box and the sentences arranged?
orientation is horizontal. The Checkbox is first, and FieldContent holds the FieldLabel and the FieldDescription beside it.
What does the description say?
The label reads Sync Desktop & Documents folders. The description says those folders are being synced with iCloud Drive and can be opened from other devices.
Does the box start checked?
Yes. The checkbox sets defaultChecked, so the row starts on. max-w-md caps the row.
How does the label connect to the box?
FieldLabel names the checkbox. Its htmlFor matches the control's id. FieldContent only groups that label with the description so they stack beside the box.
Related
- Simple Checkbox FieldA terms and conditions checkbox with its
- Switch with Description FieldA multi-factor authentication switch with
- Multiple Checkboxes FieldA fieldset of four checkboxes for the
- Simple Switch FieldAn airplane mode switch with its label on
- Input with Description Below FieldA username input with helper text under it
- Textarea with Description FieldA feedback textarea with a description