Atlas Forms
Radio Group
The radio type renders a group of radio buttons for mutually exclusive single selection. All options are visible simultaneously (unlike a dropdown), making it ideal for 2–6 options where the user benefits from seeing all choices at once. Supports vertical and horizontal layouts.
Minimal Example
{
"id": "gender",
"type": "radio",
"label": "Gender",
"required": true,
"width": "half",
"settings": {
"options": [
{ "value": "male", "label": "Male" },
{ "value": "female", "label": "Female" },
{ "value": "other", "label": "Other" },
{ "value": "prefer-not", "label": "Prefer not to say" }
]
},
"binding": {
"source": "$json",
"path": "applicant.gender"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
options | Option[] | — | Radio options: [{ value, label, description?, disabled? }] |
layout | column | row | column | Stack options vertically or arrange horizontally |
optionsPerRow | number | — | Number of options per row when layout: "row" |
showDescriptions | boolean | false | Show option description text below each label |
buttonStyle | boolean | false | Render as styled button group instead of radio circles |
Vertical Layout (Default)
Options stacked vertically work best when labels are long or when descriptions are shown:
{
"id": "subscription-tier",
"type": "radio",
"label": "Choose Your Plan",
"settings": {
"layout": "column",
"showDescriptions": true,
"options": [
{
"value": "free",
"label": "Free",
"description": "Up to 5 users, 1 GB storage, community support"
},
{
"value": "pro",
"label": "Pro — $29/month",
"description": "Up to 50 users, 100 GB storage, email support"
},
{
"value": "enterprise",
"label": "Enterprise — Custom pricing",
"description": "Unlimited users, unlimited storage, dedicated support"
}
]
}
}Horizontal Layout
Horizontal layout works well for short labels (2–4 options) like Yes/No or ratings:
{
"id": "satisfaction",
"type": "radio",
"label": "Overall Satisfaction",
"settings": {
"layout": "row",
"options": [
{ "value": 1, "label": "1 - Poor" },
{ "value": 2, "label": "2" },
{ "value": 3, "label": "3" },
{ "value": 4, "label": "4" },
{ "value": 5, "label": "5 - Excellent" }
]
}
}Button Style Group
The buttonStyle variant renders options as a toggle button group — visually similar to a segmented control. Best for compact UIs with 2–4 short options:
{
"id": "priority",
"type": "radio",
"label": "Priority",
"settings": {
"layout": "row",
"buttonStyle": true,
"options": [
{ "value": "low", "label": "Low" },
{ "value": "medium", "label": "Medium" },
{ "value": "high", "label": "High" },
{ "value": "critical", "label": "Critical" }
]
}
}Disabled Options
Mark individual options as disabled to show them as available choices that are not currently selectable:
{
"id": "payment-method",
"type": "radio",
"label": "Payment Method",
"settings": {
"options": [
{ "value": "card", "label": "Credit / Debit Card" },
{ "value": "bank", "label": "Bank Transfer" },
{ "value": "crypto", "label": "Cryptocurrency", "disabled": true, "description": "Coming soon" }
]
}
}Radio vs Select Decision Guide
| Situation | Recommended Control |
|---|---|
| 2–5 options, short labels | radio (horizontal) |
| 2–6 options with descriptions | radio (vertical) |
| 7+ options | select dropdown |
| Options loaded from API | select with optionsSource |
| Compact toggle (2 options) | switch or radio button-style |
Validation
{
"id": "employment-type",
"type": "radio",
"label": "Employment Type",
"validation": {
"required": true,
"message": "Please select an employment type"
},
"settings": {
"options": [
{ "value": "full-time", "label": "Full Time" },
{ "value": "part-time", "label": "Part Time" },
{ "value": "contract", "label": "Contract" },
{ "value": "freelance", "label": "Freelance" }
]
}
}