Function: CheckboxField()

CheckboxField<TFieldValues>(props): Element

Defined in: fields/CheckboxField.tsx:102

A checkbox field component that integrates React Hook Form with HeroUI Checkbox.

This component provides a type-safe checkbox field with validation support, error handling, and accessibility features. The field value is a boolean.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

CheckboxFieldProps<TFieldValues>

The checkbox field props

Returns

Element

The rendered checkbox field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  terms: z.boolean().refine((val) => val === true, {
    message: "You must accept the terms",
  }),
  newsletter: z.boolean().optional(),
});
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.checkbox("terms", "I accept the terms and conditions"),
          FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom styling
<CheckboxField
  control={form.control}
  name="newsletter"
  label="Subscribe"
  checkboxProps={{
    color: "primary",
    size: "lg",
  }}
/>