Skip to main content

Radio

Component
Live

The Radio component allows users to make a single selection for a set of options.

FigmaCode

Usage​

Radios provides users with a list of available options, from which only one selection can be made.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Radio } from "@iag/chroma-react-ui.components";

When to use​

Use Radios when you need users to make a single choice from a limited set of mutually exclusive choices.

When to avoid​

Avoid using Radios if multiple options can be selected, consider the Checkbox component instead. If more than 6 options are required, consider the Select component.

Do

  • Do list options in a meaningful order.
  • Do provide at least 2 choices, no more than 6.
  • Do use simple labels for easy scanning.
  • Do start all radio labels with a capital letter.
  • Do use Legends on Radio groups to provide context to the user.
  • Do provide help text for additional context where critical.
  • Do use informative error messages for easier correction.

Don't

  • Don't end a Radio label with punctuation.
  • Don't add large amounts of text to the Legend or additional content.

Additional content​

Additional content can be added where options are complex and require further information to assist the user. Only add where critical, as overloading a radio label can cause accessibility issues.