Radio Group
A group of mutually exclusive options displayed as radio buttons.
Overview
The Radio Group field renders a set of radio buttons where exactly one can be selected at a time. Unlike a dropdown, all options are visible simultaneously, making it easier for respondents to compare choices. Use radio buttons when you have 2–6 mutually exclusive options and want maximum clarity.
Radio groups can be displayed vertically (default) or horizontally using the orientation property.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| options | Option[] | [] | Array of { label, value } objects for each radio button. |
| orientation | "vertical" | "horizontal" | "vertical" | Layout direction of the radio buttons. |
JSON Schema
{
"type": "radio",
"label": "Employment Status",
"name": "employment_status",
"required": true,
"orientation": "vertical",
"options": [
{ "label": "Employed full-time", "value": "full_time" },
{ "label": "Employed part-time", "value": "part_time" },
{ "label": "Self-employed", "value": "self" },
{ "label": "Unemployed", "value": "unemployed" },
{ "label": "Student", "value": "student" }
]
}