Checkbox Field
Checkbox component integrated with React Hook Form for type-safe boolean field management.
npx shadcn@latest add https://shuip.plvo.dev/r/rhf-checkbox-field.json
Preview
Loading...
Checkboxes are binary inputs for opting in or accepting terms. CheckboxField
combines Radix UI's Checkbox with an inline clickable label, making the entire label area interactive—not just the checkbox itself.
Common patterns include required checkboxes for terms acceptance (validated with Zod's .refine()
method) or grouped checkboxes for multi-select options using separate field registrations.
Built-in features
- Clickable inline label positioned next to checkbox
- Boolean field type for true/false state
- Required validation for terms acceptance
- Zod validation: Native integration with react-hook-form
Required checkbox
const schema = z.object({terms: z.boolean().refine(val => val === true, {message: 'You must accept the terms and conditions',}),})const form = useForm({defaultValues: { terms: false },resolver: zodResolver(schema),})<CheckboxFieldregister={form.register('terms')}label='I accept the terms and conditions'description='Read our terms before proceeding'/>
Examples
Box Label
Loading...
Default
Loading...
Group
Loading...
Props
Name | Type | Description |
---|---|---|
register | UseFormRegisterReturn | React Hook Form register function result |
label | string | Clickable label displayed next to the checkbox (required) |
description | string? | Helper text displayed below the checkbox |
boxLabel | string? | Alternative label format (deprecated, use label instead) |
props | React.ComponentProps<typeof Checkbox>? | Props passed to the Checkbox component |