Radio Group

The Radio Group component lets users pick one single option out of a list.

Properties

Property	Type	Required	Description
type	"radio"	Yes	Identifies the field
options	Array<{ label: string; value: string; icon?: ReactNode }>	Yes	Options to display
schema	z.ZodType	Yes	Should validate selected value

Example

Gender selection

basic-radio.tsx

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

export const BasicRadio = createExampleForm({
  formId: "basic-radio",
  fields: {
    gender: {
      type: "radio",
      label: "Gender",
      options: [
        { label: "Male", value: "male" },
        { label: "Female", value: "female" },
        { label: "Other", value: "other" },
      ],
      schema: z.string().min(1, "Please choose an option"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["gender"],
    },
  },
});

Accessibility

• Each item is tabbable and announced via screen readers.
• Label for/id connections are handled for you.