BuzzForm
BuzzFormDocs

Radio Field

Radio button group for single selection.

Radio Field

The radio field renders a radio button group for single selection from multiple options.

Schema Properties

Prop

Type

UI Options

Same as Text Field.

Basic Usage

const schema = defineSchema({
  fields: [
    {
      type: "radio",
      name: "theme",
      label: "Theme",
      options: [
        { label: "Light", value: "light" },
        { label: "Dark", value: "dark" },
        { label: "System", value: "system" },
      ],
      required: true,
    },
  ],
});

Examples

Contact Method

{
  type: "radio",
  name: "contactMethod",
  label: "Preferred Contact Method",
  options: ["Email", "Phone", "Mail"],
}

With Descriptions

{
  type: "radio",
  name: "plan",
  label: "Plan",
  options: [
    { label: "Free", value: "free", ui: { description: "$0/month - Basic features" } },
    { label: "Pro", value: "pro", ui: { description: "$29/month - All features" } },
    { label: "Enterprise", value: "enterprise", ui: { description: "Custom pricing" } },
  ],
}

With Disabled Options

{
  type: "radio",
  name: "region",
  label: "Region",
  options: [
    { label: "North America", value: "na" },
    { label: "Europe", value: "eu" },
    { label: "Asia Pacific", value: "ap", disabled: true },
  ],
}

Dynamic Option Disabled

{
  type: "radio",
  name: "shipping",
  label: "Shipping Method",
  options: [
    { label: "Standard", value: "standard" },
    { label: "Express", value: "express" },
    { label: "Same Day", value: "sameDay", disabled: { $data: "/zipCode", eq: "" } },
  ],
}

Auto-Derived Validators

PropertyValidator
required: truerequired

On this page