Checkbox Group

The Checkbox Group renders several checkboxes managed as an array of selected values.

Example

Select your skills

checkbox-group-basic.tsx

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const SkillsCheckboxGroup = createExampleForm({
  formId: "skills-checkbox-group",
  fields: {
    skills: {
      type: "checkbox-group",
      label: "Skills",
      options: [
        { label: "HTML", value: "html" },
        { label: "CSS", value: "css" },
        { label: "JavaScript", value: "js" },
      ],
      schema: z.array(z.string()).min(1, "Select at least one skill"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["skills"],
    },
  },
});