Button Checkbox

The Button Checkbox field lets users pick multiple options using button-style toggles. Internally it stores an array of selected values.

Properties

Property	Type	Required	Description
type	"button-checkbox"	Yes	Identifies the field
options	Option[]	Yes	Array with label, value, optional icon
multiple	true (implicit)	—	Always multi-select

Example

Select target platforms

button-checkbox-example.tsx

import { Apple, Smartphone } from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const PlatformsButtonCheckbox = createExampleForm({
  formId: "platforms-button-checkbox",
  fields: {
    platforms: {
      type: "button-checkbox",
      label: "Target Platforms",
      options: [
        { label: "iOS", value: "ios", icon: <Apple /> },
        { label: "Android", value: "android", icon: <Smartphone /> },
      ],
      schema: z.array(z.string()).min(1, "Select at least one platform"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["platforms"],
    },
  },
});

Validation tip

Use z.array(z.string()).min(1) to require at least one selection or add advanced rules.