Back to components

Radio Group

zyra-radio-group

Accessible radio button group for mutually exclusive choices — vertical or horizontal layout, arrow key navigation.

API

All inputs and configuration options for zyra-radio-group.

PropTypeDefaultDescription
orientation'vertical' | 'horizontal''vertical'Layout direction of the radio options
disabledbooleanfalseDisables the entire group
labelstring''aria-label for the radiogroup role
value (on radio)string | number-Value emitted when this radio is selected
disabled (on radio)booleanfalseDisables a single radio option

Accessibility

Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.

  • Group uses role="radiogroup"; each option uses role="radio" with aria-checked
  • Arrow keys navigate between options within the group
  • Tab moves focus to the selected radio (or first if none selected)