Radio

Radios let users select one option at a time.

Overview

Radio LabelRadio LabelRadio LabelThe Radio Component.

Usage

The Radio component allows the active selection of one input at a time. It typically appears in forms and modals. If you require the user to select multiple options, then the Checkbox component should be used instead.

Anatomy

Radio LabelRadio ButtonLabel12The Radio Anatomy.
  1. Radio Button. The Radio Button is a single value toggle
  2. Label (Optional). Used to provide context to the Radio Button.

States

DefaultHover/ActiveCheckedThe Radio States.

The Radio Button has three available states - Default, Hover/Active, and Checked.

Enhanced Radio Button

The Enhanced Radio Button component allows the active selection of one input at a time. It typically appears in forms and modals. If you require the user to select multiple options, then the CheckboxCard component should be used instead.