RadioCard

Radios are used to choose a single
answer from a set of options.

  • Do use radio buttons when the user is required to choose a single option from a list of pre-defined values.
  • Use radio buttons when there are 7 or fewer options to choose from.
  • When the input isn't mandatory.
  • When the user should be able to select more than one of the pre-defined values. For this use case, use a Checkbox component

Live example

Storybook failed to load. Please connect to the VPN to access.

Availabile platforms

Platform

Available

Figma

Web (@ovotech/element)

v4+

App (@ovotech/element-native)

v4+


How to use it

Content guidelines

Copy for individual inputs in radios and checkbox groups are in semibold for consistency, because they sit in a hierarchy below the group labels.

Only ask for information that is definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.

There are two types of hint texts:

  • Text that appears below the Radio list label. It should be relevant to the entire group.
  • Text below the select item. It should be relevant to that item only.

Properties

Radio

Name

Values

Default

id (required)

String

 

label (required)

ReactNode

 

hasInput

boolean

true

checked (native)

boolean

 

invalid (native)

boolean

 

activeOpacity (native)

number

0.8


Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As someone using the component, I want to understand the label associated with each radio control.
  • As someone with a cognitive disability, I want to be able to understand the information required from me, and the answers I can provide.
  • As someone with a cognitive disability, I want to be able to understand any errors related to the radios, as well as how to resolve the error.
  • As a keyboard-only user, I want to be able to navigate to each of the radios and then activate them using the Space key.
  • As someone with a motor disability, I want to be able to easily select the correct radio.
  • As a screen reader user, I want the group label relating to the radios to be announced when navigating through the radios.
  • As a screen reader user, I want any additional information provided alongside the group label to be announced when navigating through the radios.
  • As a screen reader user, I want the radio's label and its state (whether it is checked or not) to be announced when I navigate to it.
  • As a screen reader user, I want any error messages relating to the radios to be announced when they become present.
  • As a voice-control user, I want to be able to select a radio using its associated label.

Test steps

Use these steps to check that the Radio component has been implemented correctly:

  1. Turn on a screen reader.
  2. Navigate to the radio(s).
  3. Verify that each radio has a visible label.
  4. Verify that when navigated to, both the radio's label and the group label are announced and that these match those visually present.
  5. Verify that the radio can be activated using the Space key.
  6. Verify that the radio's state is correctly announced by a screen reader.

If any errors appear when the form is validated, complete the following checks:

  1. Turn on a screen reader.
  2. Verify that when an error message appears after the form has been submitted, that the error is included in the ErrorSummary component.
  3. Navigate to the radio(s) using the Tab key.
  4. Verify that once the radio receives focus, that there is an announcement to convey that there is an error with this field.

Related components


Related patterns


External links