Radio Group

Mutually exclusive choices with visible tiles—same option sourcing and nested-form recursion as Select.

Overview

The Radio Group surfaces every choice at once inside clickable tiles tied to a single shared radio cluster—ideal when respondents should compare labels side-by-side instead of opening a dropdown.

Under the hood it follows Select semantics: submissions store one string value, optionConfigs define labels/values/nestedForm, isDynamic pulls remote arrays, and dependent URLs honor dependsOn plus brace placeholders.

Properties

Property	Type	Default	Description
id	string	—	Unique field identifier.
type	string	"radio"	Discriminator.
label	string	—	Human-readable label shown above the field or step heading.
required	boolean	false	When true, the form cannot submit without a value.
isHidden	boolean	false	Hides the field from respondents (may still store defaults).
isDisabled	boolean	false	Renders the field read-only.
instruction	string	undefined	Help text shown below the label (not the same as placeholder).
optionConfigs	OptionConfig[]	undefined	{ label, value, nestedForm? } entries become mutually exclusive tiles.
optionConfigs[].nestedForm	NestedForm	undefined	Rendered only for the active selection (same pattern as Select).
options	string[]	[]	Plain-label shorthand when optionConfigs omitted.
isDynamic	boolean	false	Fetch tiles via dataSource.
dataSource.url	string	—	HTTP endpoint with optional placeholders.
dataSource.method	"GET" \| "POST"	GET	HTTP verb.
dataSource.path	string	""	Dot-path to option array inside JSON response.
dataSource.valueField	string	—	Stored value property per row.
dataSource.labelField	string	—	Displayed label property per row.
dataSource.headers	object	undefined	Extra headers.
dataSource.body	object	undefined	POST body template.
dataSource.dependsOn	string	undefined	Parent field id controlling reload + substitution.
dataSource.parentValuePath	string	undefined	Placeholder token replaced inside url.
dataSource.parentValueParam	string	undefined	POST-only merge key for parent values.

Static options

{
  "id": "a55bdd9f-7f90-4f1c-9f33-555555555555",
  "type": "radio",
  "label": "Employment status",
  "required": true,
  "placeholder": "Choose one",
  "options": ["Full-time", "Part-time"],
  "optionConfigs": [
    { "label": "Employed full-time", "value": "full_time" },
    { "label": "Employed part-time", "value": "part_time" },
    { "label": "Self-employed", "value": "self" },
    { "label": "Student", "value": "student" }
  ]
}

Dynamic options

{
  "id": "b66bdd9f-7f90-4f1c-9f33-666666666666",
  "type": "radio",
  "label": "Quote author",
  "required": false,
  "options": ["Option 1", "Option 2"],
  "isDynamic": true,
  "dataSource": {
    "url": "https://dummyjson.com/quotes",
    "path": "quotes",
    "valueField": "id",
    "labelField": "author",
    "method": "GET"
  }
}

Dependent options

{
  "id": "c77bdd9f-7f90-4f1c-9f33-777777777777",
  "type": "radio",
  "label": "Quote detail",
  "required": false,
  "options": ["Option 1", "Option 2"],
  "isDynamic": true,
  "dataSource": {
    "url": "https://dummyjson.com/quotes/{id}",
    "path": "",
    "valueField": "id",
    "labelField": "author",
    "dependsOn": "b66bdd9f-7f90-4f1c-9f33-666666666666",
    "parentValuePath": "id"
  }
}

Nested option forms

Exactly like Select: only the tile matching the current value mounts its nestedForm.fields. Switching radios swaps which nested subtree is active.

Use Cases by Pattern

Static radios

Low cardinality choices where seeing every label beats opening a menu
Forms emphasizing fairness/comparison across visibly enumerated answers

Dynamic / dependent radios

Shipping-method tiles sourced from fulfillment APIs scoped by cart warehouse id
Tier pickers refreshed after an upstream eligibility lookup field changes

Nested radios

Insurance plans where each radio reveals plan-specific beneficiary fields
Branching onboarding lanes authored entirely inside optionConfigs recursion

PreviousCheckbox Group

NextDate Picker