Radio Button

Radio Button Group allows the user to select exactly one value from a list of related, but mutually exclusive, options.

<RadioGroup label='Travel class' theme='vertical'>
  <RadioButton value='economy' label='Economy' />
  <RadioButton value='business' label='Business' />
  <RadioButton value='firstClass' label='First Class' />
</RadioGroup>

Common input field features

RadioButton includes all shared input field features.

See shared input field features

States

Read-Only

Use read-only when content needs to be accessible but not editable. Read-only elements can’t be edited, but they are part of the tabbing order and can thus receive focus. The contents of a read-only input can be selected and copied.

<RadioGroup label='Status' readonly>
  <RadioButton value='inProgress' label='In progress' checked />
  <RadioButton value='done' label='Done' />
  <RadioButton value='cancelled' label='Cancelled' />
</RadioGroup>

Disabled

Disable a field to mark it as currently unavailable. The disabled state is used for fields that aren’t editable and don’t need to be readable. Disabled elements can’t be focused and may be inaccessible to assistive technologies such as screen readers.

Disabling can be preferable to hiding an element to prevent changes in layout when the element’s visibility changes, and to make users aware of its existence even when it’s currently unavailable.

<RadioGroup label='Status' disabled>
  <RadioButton value='inProgress' label='In progress' checked />
  <RadioButton value='done' label='Done' />
  <RadioButton value='cancelled' label='Cancelled' />
</RadioGroup>

Orientation

The component’s default orientation is horizontal but vertical orientation is recommended whenever possible, as it’s easier for the user to scan a vertical list of options:

<RadioGroup label='Status' theme='vertical'>
  <RadioButton value='pending' label='Pending' checked />
  <RadioButton value='submitted' label='Submitted' />
  <RadioButton value='confirmed' label='Confirmed' />
</RadioGroup>

In cases where vertical space needs to be conserved, horizontal orientation can be used, but it’s recommended to have no more than three options:

<RadioGroup label='Status' theme='horizontal'>
  <RadioButton value='pending' label='Pending' checked />
  <RadioButton value='submitted' label='Submitted' />
  <RadioButton value='confirmed' label='Confirmed' />
</RadioGroup>

Docs