Radio buttons

Use radio buttons when you want the user to select only one option from a list.

  • Content:
    @import "../../../theme/assets/styles/sass/variables-import";
    
    $ontario-touch-target-size: 36px;
    $ontario-touch-target-size-mobile: 40px;
    $ontario-radios-size: 32px;
    $ontario-radios-size-mobile: 36px;
    $ontario-input-offset: ($ontario-touch-target-size - $ontario-radios-size) / 2;
    
    .ontario-radios {
        padding: 0 0 0 ($spacing-1/2);
        margin-bottom: $spacing-7;
    }
    
    .ontario-radios__item {
        position: relative;
        display: block;
        margin: 0 0 $spacing-4;
        padding: 0 $spacing-6 0;
    }
    
    .ontario-radios__input {
        cursor: pointer;
        margin: 0;
        position: absolute;
        opacity: 0;
        top: $ontario-input-offset * -1;
        left: $ontario-input-offset * -1;
        width: $ontario-touch-target-size;
        height: $ontario-touch-target-size;
        z-index: 1;
    
        @media screen and (max-width: $small-breakpoint) {
            width: $ontario-touch-target-size-mobile;
            height: $ontario-touch-target-size-mobile;
            top: $ontario-input-offset * -.75;
            left: $ontario-input-offset * -.75;
        }
    }
    
    .ontario-radios__label {
        display: inline-block;
        font-size: 1rem;
        margin: 0.2rem 0;
        padding: 0 $spacing-3;
        // remove 300ms pause on mobile
        touch-action: manipulation;
    
        @media screen and (max-width: $small-breakpoint) {
            margin: 0.3rem 0;
            padding: 0 1rem;
        }
    
        &:before {
            content: "";
            border: 2px solid $ontario-colour-black;
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            width: $ontario-radios-size;
            height: $ontario-radios-size;
            transition: border 0.1s ease-in-out;
    
            @media screen and (max-width: $small-breakpoint) {
                width: $ontario-radios-size-mobile;
                height: $ontario-radios-size-mobile;
            }
        }
    
        &:after {
            content: "";
            border-radius: 50%;
            border: 10px solid $ontario-colour-black;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate($ontario-input-offset * 3, $ontario-input-offset * 3);
            opacity: 0;
    
            @media screen and (max-width: $small-breakpoint) {
                border: 12px solid $ontario-colour-black;
            }
        }
    }
    
    .ontario-radios__input:focus+.ontario-radios__label:before {
        -moz-box-shadow: 0 0 0 4px $ontario-colour-focus;
        -webkit-box-shadow: $ontario-colour-focus;
        box-shadow: 0 0 0 4px $ontario-colour-focus;
        outline: 4px solid transparent;
        transition: box-shadow 0.1s ease-in-out;
    }
    
    .ontario-radios__input:checked+.ontario-radios__label:after {
        opacity: 1;
    }
    
  • URL: /components/raw/radio-buttons/radio-buttons.scss
  • Filesystem Path: fractal/components/components/radio-buttons/radio-buttons.scss
  • Size: 2.6 KB
  • Content:
    .ontario-radios{padding:0 0 0 .125rem;margin-bottom:2.5rem}.ontario-radios__item{position:relative;display:block;margin:0 0 1rem;padding:0 2rem 0}.ontario-radios__input{cursor:pointer;margin:0;position:absolute;opacity:0;top:-2px;left:-2px;width:36px;height:36px;z-index:1}@media screen and (max-width: 40em){.ontario-radios__input{width:40px;height:40px;top:-1.5px;left:-1.5px}}.ontario-radios__label{display:inline-block;font-size:1rem;margin:.2rem 0;padding:0 .75rem;touch-action:manipulation}@media screen and (max-width: 40em){.ontario-radios__label{margin:.3rem 0;padding:0 1rem}}.ontario-radios__label:before{content:"";border:2px solid #1a1a1a;border-radius:50%;box-sizing:border-box;position:absolute;top:0;left:0;width:32px;height:32px;-webkit-transition:border .1s ease-in-out;transition:border .1s ease-in-out}@media screen and (max-width: 40em){.ontario-radios__label:before{width:36px;height:36px}}.ontario-radios__label:after{content:"";border-radius:50%;border:10px solid #1a1a1a;position:absolute;top:0;left:0;-webkit-transform:translate(6px, 6px);transform:translate(6px, 6px);opacity:0}@media screen and (max-width: 40em){.ontario-radios__label:after{border:12px solid #1a1a1a}}.ontario-radios__input:focus+.ontario-radios__label:before{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;-webkit-transition:box-shadow .1s ease-in-out;transition:box-shadow .1s ease-in-out}.ontario-radios__input:checked+.ontario-radios__label:after{opacity:1}
  • URL: /components/raw/radio-buttons/radio-buttons.css
  • Filesystem Path: fractal/components/components/radio-buttons/radio-buttons.css
  • Size: 1.5 KB

Guiding principle: Give the user control.

When to use this component

Use radio buttons when you want the user to select only one option from a list.

If you want the user to select more than one option use a list with checkboxes.


Order of radio button lists

Put radio button lists in alphabetical order, with these exceptions:

  • list yes before no
  • if there is an option that you know about 90% or more of your users will choose, put that option first
    • for example, list Ontario first if users are choosing their province from a list
    • be careful not to bias the user’s choice or imply the importance of option one over another
  • put any “None of the above” or “I do not know” options last

Technical specifications

Heading: choose your renewal term (required). Two radio buttons with options listing Two year and One year. Arrow pointing to the Two Year option to indicate label.

Do:

  • always include an associated label with a matching ID next to each radio button
  • position radio buttons to the left of their labels
  • left-align radio buttons
  • always make the label and the radio button selectable
  • stack radio buttons vertically
    • exception: yes/no can be listed horizontally
  • include a “None of the above” or “I do not know” option if they are valid because users cannot go back to having no option selected once they have selected one

Do not:

  • change a radio button’s default size (32px on desktop and 36px on mobile, with a hit area of 48px for both)
  • pre-select radio buttons (users might miss the question or submit the wrong answer)

Help improve this page

The design system team is considering making a smaller radio button available – please let us know if there is a use case for it.

If you have other suggestions or advice or any questions on radio buttons, the design system team would love to hear from you.