Radio

Overview

View on FigmaView on GitHub

Purpose

Radios are form elements used to display lists with two or more options that are mutually exclusive. The user can only select one Radio item per list.

Even though the Radio is its own component, we recommend using the Control Field instead because it offers a label, validation message, and in-line messaging.

Anatomy

The Radio component can be broken down into the following elements -

  1. Radio Indicator
    The Radio indicator shows if a selection has been made.

  2. Text Label
    The text label is used to describe the option to the user.

  3. In-line Messaging
    An optional text field that can be used for further information, clarifying the option.

Variants & States

  • Status: Unselected, Selected, Error
  • States: Default, Hover, Focus, Disabled, Read Only
  • Label on/off
  • In-line Messaging on/off