Button Radio

The Button Radio field offers the same semantics as a radio group but wrapped in ShadCN buttons—perfect for modern UIs that need more visual affordance.

Properties

Property	Type	Required	Description
type	"button-radio"	Yes	Identifies the field
options	Option[]	Yes	Array with label, value, optional icon
multiple	—	—	Not applicable (single select)

Example

Payment method selection

button-radio-example.tsx

import { CreditCard, DollarSign } from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const PaymentMethodButtonRadio = createExampleForm({
  formId: "payment-method-button-radio",
  fields: {
    paymentMethod: {
      type: "button-radio",
      label: "Payment Method",
      options: [
        { label: "PayPal", value: "paypal", icon: <DollarSign /> },
        { label: "Credit Card", value: "card", icon: <CreditCard /> },
      ],
      schema: z.string().min(1, "Choose a method"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["paymentMethod"],
    },
  },
});