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
| Property | Validator |
|---|---|
required: true | required |