shadcn.io is not affiliated with official shadcn/ui
Form examples · Advanced
Form with Checkbox for React
A form with three checkboxes and their descriptions, where the terms box must be checked before the form submits.
Checkbox validation for required agreements: the terms box must be checked before the form submits. Each row is a horizontal Field with the Checkbox first and a FieldContent holding its FieldLabel and FieldDescription. A Controller wires each box into React Hook Form, and the Zod schema refines terms to true while marketing and security stay optional. Use it for terms acceptance, newsletter opt-ins or notification preferences.
Preview
Installation
FAQ
How is the terms checkbox required?
terms is z.boolean().refine((value) => value, …) with the message "You must accept the terms and conditions." While the box is unchecked, submit fails, the row's Field gets invalid and its FieldError shows the message under the description.
Do the other two boxes have to be checked?
No. marketing and security are plain z.boolean(), so either value submits. Their FieldError stays empty.
Which boxes start checked?
defaultValues sets marketing to false, security to true and terms to false. Each Checkbox is controlled by its field's value: checked={field.value} and onCheckedChange={field.onChange}.
How is each row laid out?
The three rows come from one options array mapped to a Controller each. A row is Field orientation="horizontal" with the Checkbox, then FieldContent with the FieldLabel, the FieldDescription and the FieldError. The label's htmlFor matches the checkbox's id, such as form-with-checkbox-terms.
Related
- Form with SwitchThree notification switches, email, push
- Form with Mixed ControlsA support request form that mixes a text
- Signup FormA sign-up form with full name, email, a
- Simple CheckboxA checkbox with a label for a single
- Default SwitchA switch in its default off state, with
- Error with Title AlertA destructive alert with only a title