RadioGroup

Two components: RadioGroup (the container) and Radio (individual options). Built on React Aria’s RadioGroup and Radio primitives with full keyboard and screen reader support.

Add via CLI

npx @a2ra/cli add radio

Basic

Horizontal

Example JSON

{
  "type": "RadioGroup",
  "props": {
    "label": "Subscription plan",
    "name": "plan",
    "defaultValue": "monthly",
    "orientation": "horizontal"
  },
  "children": [
    { "type": "Radio", "props": { "value": "monthly", "label": "Monthly" } },
    { "type": "Radio", "props": { "value": "annual", "label": "Annual" } },
    { "type": "Radio", "props": { "value": "lifetime", "label": "Lifetime" } }
  ]
}

RadioGroup props

Prop	Type	Description
`label`	`string`	Group label
`value`	`string`	Controlled selected value
`defaultValue`	`string`	Uncontrolled default
`orientation`	`horizontal` `vertical` default	Layout direction
`isDisabled`	`true` `false` default	Disables all radios
`isRequired`	`true` `false` default	Marks group as required
`isReadOnly`	`true` `false` default	Prevents selection changes
`isInvalid`	`true` `false` default	Shows error styling
`validationBehavior`	`aria` default `native`	Validation strategy
`name`	`string`	Form field name
`description`	`string`	Helper text
`errorMessage`	`string`	Error text when `isInvalid` is true
`children`	`node[]`	`Radio` child nodes

Radio props

Prop	Type	Description
`value`	`string`	The value submitted when this radio is selected (required)
`label`	`string`	Visible label text
`isDisabled`	`true` `false` default	Disables just this option

Notes

Radio.value is required. The RadioGroup uses it to track and submit the selection.
Arrow keys move focus between options; Space selects the focused option.
Only one Radio per group can be selected at a time.