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),
})
<CheckboxField
register={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

NameTypeDescription
registerUseFormRegisterReturnReact Hook Form register function result
labelstringClickable label displayed next to the checkbox (required)
descriptionstring?Helper text displayed below the checkbox
boxLabelstring?Alternative label format (deprecated, use label instead)
propsReact.ComponentProps<typeof Checkbox>?Props passed to the Checkbox component