shadcn.io is not affiliated with official shadcn/ui
Field examples · Toggles
Simple Checkbox Field for React
A terms and conditions checkbox with its label beside it.
The single agreement checkbox. A horizontal Field puts the Checkbox first and its FieldLabel beside it, in normal weight, so the sentence reads as the choice. Clicking the sentence toggles the box.
Preview
Installation
FAQ
Why is the checkbox beside the sentence?
orientation is horizontal, with the Checkbox first and the FieldLabel beside it. The label reads I agree to the terms and conditions.
Why is the label not bold?
font-normal on FieldLabel keeps the sentence at normal weight. The label is the choice itself.
How does the sentence toggle the checkbox?
FieldLabel names the checkbox, so the sentence is the label for that box. Its htmlFor matches the control's id. max-w-md caps the row.
Does the box start checked?
This checkbox passes no default, so it starts off. Start it checked when the common case is already agreed: pass defaultChecked.
Related
- Checkbox with Description FieldA checked checkbox with a label and a
- Multiple Checkboxes FieldA fieldset of four checkboxes for the
- Simple Switch FieldAn airplane mode switch with its label on
- Radio Buttons FieldA fieldset of three radio buttons for
- Simple Input with Label FieldAn email input with its label above it
- Fieldset with LegendAn address fieldset with a legend, a