Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Components

Radio

Overview

When to use

Use the radios component when users can only select one option from a list.

When not to use

Do not use the radio component if users might need to select more than one option. In this case, you should use the checkboxes component instead.

Principles​

Radio buttons always have a minimum of two options.

Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

Make the label clickable. Users should be able to click on either the text label or the radio button to select or deselect an option.

Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, ‘Select one option’.

Do not pre-select radio options as this makes it more likely that users will:

  • not realise they’ve missed a question
  • submit the wrong answer

Size​

Regular should be used in most cases. Compact could be used for example in large and dense data tables.

Regular size

Compact size

Inline state​

Hint text​

Hint text can be added to the legend and also to individual radios.

Required indicator​

Single line legend

Multiple line legend

Error messages​

Disabled state​

Use this state when the user doesn’t have permission to edit the field.