Skip to content

Notifications

Government mail service may be affected by the Canada Post labour disruption. See how to send and receive government mail during this time. 

AI search tool

Try our new Search AI tool as an alternative to the search below to improve your experience on Alberta.ca using artificial intelligence. See the AISearch fact sheet for more information.

Popular topics:

Part of Components

Radio buttons

Input field allowing for a single selection from a small list of options commonly found in a form.

Overview

Radio buttons use fieldsets for accessibility and categorization purposes. The option group (radio button and label) allows a person to select one option from 2 or more options. The option is meant to be submitted as data and is part of a form. You press a submission button in for the input data to be recorded.

Design

Radios

Usage guidelines

Use radio buttons when you can only select one option. Use checkboxes when it is possible to select multiple options.

Choose radio buttons instead of drop down lists because it lowers cognitive load. However do not use radio buttons when there 7 or more options. Use a drop down list instead.

Layout

Unselected:

  • Default: 1 pixel solid #666666 border
  • Hover: 1 pixel solid #333333 border, #F1F1F1 background
  • Focus and active: hover state with 2 pixels outline #FEBA35
  • Disabled: 40% transparency

Selected:

  • Default: 1 pixel solid #666666 border, #0070C4 background
  • Hover: #333333 background
  • Focus and active: hover state with 2 pixels outline #FEBA35
  • Disabled: 40% transparency

Size and positioning

The size of the radio button icon should be 24 pixels and on the left side of the label. Leave an 8-pixel gap between the icon and label.

Content guidelines

Follow these guidelines to create radio button labels:

  • be clear about what the selection represents
  • keep the label to one sentence
  • use active voice