Function: CheckboxGroupField()

CheckboxGroupField<TFieldValues, TValue>(props): Element

Defined in: fields/CheckboxGroupField.tsx:135

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

This component provides a type-safe checkbox group field with validation support, error handling, and accessibility features. Multiple options can be selected, and the value is stored as an array of selected option values.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

TValue

TValue extends string | number = string

The value type for the checkbox group (string or number)

Parameters

props

CheckboxGroupFieldProps<TFieldValues, TValue>

The checkbox group field props

Returns

Element

The rendered checkbox group field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  interests: z.array(z.string()).min(1, "Please select at least one interest"),
});
 
const options = [
  { label: "Reading", value: "reading" },
  { label: "Sports", value: "sports" },
  { label: "Music", value: "music" },
];
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.checkboxGroup("interests", "Interests", options),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom styling and horizontal layout
<CheckboxGroupField
  control={form.control}
  name="interests"
  label="Interests"
  options={options}
  orientation="horizontal"
  checkboxProps={{
    color: "primary",
    size: "lg",
  }}
/>