Radio button

Use radio buttons when users must select one option in a list with exclusive options out of a set of two or more options. Radio buttons are common to use in forms, i.e when you apply for a loan and need to enter "Yes" or "No".

Guidelines

Follow conventions

Users should be able to undo and redo their actions. For that reason radio buttons should always have one option pre-selected. The option that is pre-selected should be the safest and most secure option. When using radio button, follow the conventions for hover, active (with frame), selected and disabled.

Radio buttons or dropdown?

Radio buttons are almost always the preferred option to a dropdown. With radio buttons a user can immediately scan how many and what options there are, without having to click anything. Unless you have to present a lot of options (more than 7), or have a lack of space, use radio buttons.

Do's and don'ts

Placing

  • There are perks with both vertical and horizontal placing. If there are two options, it’s recommended to place them horizontally. When there are more than two options, place the radio buttons vertically.

Order

  • To make the list of options easier for users to understand, list the options in a logical order such as; least complex to most complex, least risk to most risk, or most likely to be selected to least likely.
  • Do not order options alphabetically, localization will likely break the ordering. Avoid nested options, it’s better to have all the options on the same level.

Choice commitment

  • Do not commit to any choice the user makes, without having the user confirm the choice with an additional action. For example: clicking a "Save"- or "Cancel"-button on a settings page.

Specification

Colour

  • Normal: Grey 6 (border)
  • Hover: Blue
  • Selected: Dark blue 2
  • Pressed: Dark blue 2 (filled)
  • Disabled: Grey 8 (border), Grey 9 (filled)

Click area

To make it easier for users to use the component, the label should also be clickable.

States

Radio button - states