Radio buttons are used when there is a list of two or more options and the user must select exactly one option.

Clicking an un-selected radio button will deselect whatever other button was previously selected in the list.

Radio buttons have a single title text or a supporting line of text underneath the title.

# Component

Checkbox states

# Rules

Do

  • Make sure the minimum touch point (56pt) is observed
  • Clearly differentiate selected and unselected radios
  • Let customers click or tap on the entire area, rather than just the button

Don't

  • Use radio buttons if there are many options to choose from. Use a dropdown instead.
  • Lay out radio button groups horizontally. This makes it difficult for the user to separate each item in the list.

# Structure

Radio button specifications

# Specifications

Min height Padding(x) Padding(y) Gutters Radio size
56pt 16pt 4pt 16pt 32pt

# Typography

Font size Line height
16pt 24pt
Last Updated: 10/6/2020, 8:34:39 AM