Radio
A radio button group for selecting exactly one option from a visible list.
The Radio field renders a group of mutually exclusive options where all choices are visible at once. Unlike a Select dropdown, every option is immediately visible on screen, making it ideal for short lists (two to five choices) where you want users to see and compare all options without clicking.
For the shared properties available on all fields (label, help, note, key, width, visual styling, required), see the Form Fields Overview.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| options | Option[] | Two default options | List of selectable options, each with a value, label, and optional title/description |
| layout | "default" or "cards" | "default" | Visual layout style. "cards" renders each option as a bordered card. |
| orientation | "vertical" or "horizontal" | "vertical" | Stack options vertically or lay them out in a row |
| allowOther | boolean | -- | When true, adds a free-text "Other" option |
| defaultValue | string | -- | The value of the option that should be pre-selected |
Option structure
Each option in the options array has the following shape:
| Property | Type | Description |
|---|---|---|
| value | string | The programmatic value stored in submission data |
| label | string | The text displayed to the user |
| title | string | Optional bold heading (synced with label in the editor) |
| description | string | Optional subtitle beneath the option |
Validation
The Radio field extends InputFieldBase, so the required toggle is available. When required, the user must select one option before the form can be submitted.
Example Usage
A plan selection with card layout:
{
"type": "radio",
"label": "Choose a plan",
"required": true,
"layout": "cards",
"orientation": "horizontal",
"options": [
{ "value": "free", "label": "Free", "title": "Free", "description": "Basic features" },
{ "value": "pro", "label": "Pro", "title": "Pro", "description": "Advanced features" },
{ "value": "enterprise", "label": "Enterprise", "title": "Enterprise", "description": "Custom solutions" }
]
}