Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

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".


Short description

A radio button allows a user to select a single item from a predefined list of options. Radio buttons are common to use in forms, i.e when you apply for a loan and need to enter "Yes" or "No".

Users should be able to understand their options as well as undo and redo their actions. For that reason radio buttons should always have one option pre-selected. 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.

When and how to use it

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.


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.

Do's and don'ts

  • The option that is pre-selected should be the safest and most secure option.
  • Follow the conventions for hover, active, selected and disabled


  • 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.
  • 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.



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

  • Text: Body
  • Height: 2.75 rem



  • Text: Grey 800
  • Normal border: Grey 400
  • Hover: Blue
  • Selected: Dark blue 2
  • Pressed, filled: Dark blue 2
  • Disabled border: Grey 200
  • Disabled border: Grey 100


  • Blue
  • Dark blue 2
  • Grey 100
  • Grey 200
  • Grey 400
  • Grey 800




Dark mode

Read more about Pattern: Dark mode 

Related patterns & components

Page last updated


Was this helpful?