Switch Group

The Switch Group provides multiple toggle switches bound to an array of strings representing active channels.

Example

Notification channels

switch-group-basic.tsx

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

export const NotificationsSwitchGroup = createExampleForm({
  formId: "notifications-switch-group",
  fields: {
    channels: {
      type: "switch-group",
      label: "Notification Channels",
      options: [
        { label: "Email", value: "email" },
        { label: "SMS", value: "sms" },
        { label: "Push", value: "push" },
      ],
      schema: z.array(z.string()),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["channels"],
    },
  },
});