Radio Button

#Overview

Radio buttons allow users to make one selection from a set of options.

overview

#When to use

  • The user must pick from a defined set of mutually exclusive options
  • All options are displayed
  • The user needs to fill out a form, configure settings or answer a survey

#Don’t use for

#Anatomy

The label’s font size differs between desktop (14px) and mobile (16px).

anatomy

#States

#Galaxus

states-galaxus

#Digitec

states-digitec
  1. Normal
  2. Normal + Focus
  3. Selected
  4. Selected + Focus
  5. Disabled
  6. Selected + Disabled
  7. Error

#Validation

Error messages appear in radio buttons when a user input is incorrect or missing. The error should be explained and a solution offered. Error messages should only be displayed after the user input.

Error messages should be clear, short and understandable and formulated from the user's perspective. The error only needs to be displayed once, not for every individual radio button.

overview