Radio

Interactive element that allows users to make a single selections from a list

Image of radio group with 4 options

Example of radio group

 

 

Anatomy

  1. Focus ring: visual focus state
  2. Container: box that visually shows if it’s selected or not
  3. Label: clear and concise text
Image of checkbox for anatomy

Visual reference for anatomy

 

 

Variants

There are 2 variants for the component: with and without a label.

 

 

 


Designer resources