Usage

View in Storybook

Anatomy

A radio can be a standalone element to sit next to additional text or work within certain components.

Radio: Signifies whether a selection of an item has been made by the consumer.

Label (optional): Title of an item that can be selected.

Help Text (optional): An additonal text description to help explain the purpose of the radio.

States

Radio has unchecked, checked, error, and disabled states.

The Radio is only ever selectable once individually. If you need multiple selections or have only one option, use Checkbox. If you need to provide a on/off choice that takes effect immediately, use Switch.

Accompanying label and helper text

Include a description when required to provide more explanation. This description is used when showing any error messaging.

Grouping

	Radio groups are used for selecting only 1 item from a list of 2 or more items. We recommened 8px padding between each radio item. Currently we don't support Radio groups as a separate component.

	Use helper text to provide extra context or information for each option.

	Standalone radio buttons are automatically included within specific components such as ListOption.

Best practice

Radio can be used in many parts of the product for various types of selection purposes;

Use Radio if you need to toggle between two or more individual options.

Typically associated with a form that must be submitted for changes to be saved.

Radio is used when the options are mutually exclusive.

When the selection doesn’t take immediate effect and thus requires form submission.

Do's and Don'ts

Do	Don't
✅ Use when only one of multiple options can be selected.	🚫 Use to select more than one option from a list. Use Checkbox instead.
✅ Use when there is only one option in a list to select.	🚫 Use when it’s difficult to tell that a radio turns something on or off. Use Switch instead.
	🚫 Overwhelm users with too much information in a label or helperText - single line descriptions are recommended

Also see

Checkbox

Switch