Radio

Use Radio for mutually exclusive options where exactly one value is selected.

Example

Preferred contact method

API reference

RadioProps

namestring

Name: name

Description: Required shared name for radio group options.

Type: string

Default:

optionsRadioOption[]

Name: options

Description: Array of radio options with value/label/disabled.

Type: RadioOption[]

Default:

labelstring

Name: label

Description: Group label text rendered above options.

Type: string

Default:

errorstring

Name: error

Description: Error text shown below group and announced.

Type: string

Default:

helperTextstring

Name: helperText

Description: Optional helper text shown when no error.

Type: string

Default:

Accessibility

  • WCAG 1.3.1: Radio controls are grouped with contextual labeling.
  • WCAG 2.1.1: Arrow keys and tab order support group navigation.
  • WCAG 4.1.2: Selected state is conveyed through semantic inputs.

Playground

Open Radio stories