Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Let users pick only one option from a short list.

Radios constrain users to choose only one option. Selecting that one will deselect another. Use radios when there are five or fewer choices to display simultaneously. For a list longer than five, try a select instead.

Web
React Native
Android
Apple
Other

Single Radio

<Radio
  label="Coaches"
  value="coaches"
  name="recipientsList"
/>

Props

label

string

The label that appears to the right of the radio.

name

string

The name associated with the radio.

value

string
number
bool

The value bound to the input.

id

string

A unique identifier for the checkbox. One will be auto-generated if not provided.

checked

bool

Determines whether the radio is checked.

disabled

bool

Determines whether the radio is disabled.

hasError

bool

Determine whether to show an error state on the radio group.

helpText

string
element

The text that appears below the radio group, usually to guide the user on what to provide.

onChange

func

Responds to the radio being checked or unchecked. The value of the radio is passed.

qaId

string

A unique-enough string that appears as a data attribute in the rendered code and serves as a hook for automated tests.

Notes

  • Do not pass the checked attribute if you're using this component within a RadioGroup. Instead, use that component's valueChecked prop.

Radio Group

The Radio Group is the parent element of related radios from which a user is expected to choose one of the options.

Recipients

<RadioGroup header="Recipients" name="recipientsList">
  <Radio
    label="Coaches"
    value="coaches"
    name="recipientsList" />
  <Radio
    label="Athletes"
    value="athletes"
    name="recipientsList" />
  <Radio
    label="Opposing Team"
    value="opposingTeam"
    name="recipientsList"
    disabled />
</RadioGroup>

Props

The text that appears above the group of radios.

name

string

A name to group the radios together so only one can be selected.

valueChecked

string
number
bool

The value checked.

required

bool

Determines whether the required text appears next to the header.

disabled

bool

Determines whether the entire radio group is disabled.

hideHeader

bool

Determines whether the text above the radio group is shown.

hasDivider

bool

Determines whether to show a visual divider above the radio group.

onChange

func

Responds to the radio being checked or unchecked. The value of the clicked radio is passed.

className

string

Add a custom class to the form element.

qaId

string

A unique-enough string that appears as a data attribute in the rendered code and serves as a hook for automated tests.