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.

When and how to use it

The radio button component should be used when the user are presented with a list of options where only one choice can be selected. A user can immediately scan how many and what options there are. If you have to present a lot of options or have a lack of space, use a dropdown.

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.

Size variants

Some components are available in two sizes to support different layout needs and use cases:

• Large (default): This is the default size for input fields.
• Small: This size is intended for confined spaces, such as tables, or in situations where optimising screen space is important for professional users.

Note.The small variant is fully supported only in the interim design, which visually aligns more closely with DV23.

Do's and don'ts

Do

• The option that is pre-selected should be the safest and most secure option, or the most commonly selected.

Don't

• Avoid long labels sorted in an illogical order.

Yes and no

Adapt the radio button options to the field label. If the field label is a yes or no question, the answer options should be yes and no and nothing else.

In English:

Do this

Don't do this

In Swedish:

Do this

Don't do this

Be consistent

Write consistent options. Decide if they should

• be complete sentences and begin with lowercase or uppercase letters
• end with a full stop or not
• be a sentence, one, or a word

In English:

Do this

Don't do this

In Swedish:

Do this

Don't do this

The bank talks to the customer

Remember, it is the bank that asks the question and the customer who answers. Therefore, the label should be in the you-form and the answer in the I-form. However, most of the time, the answer does not include the I-form because that becomes redundant, you understand that it is the user who answers.

In English:

Do this

Don't do this

In Swedish:

Do this

Don't do this

Prevent redundancy

Keep the text to the point by excluding the I-form in some contexts.

In English:

Do this

Don't do this

In Swedish:

Do this

Don't do this

Write in plain text and to the point

Plain texts are as important as always. The customers must understand both the words and the context. Make sure that the options cover all possible choices and are explicit so that all intended customers can fill in the form. If there could be other options, add the option Other and an input field where the customer can explain.

In English

In Swedish

From accessibility perspective it is recommended to place radio buttons vertically, to make it more obvious which label corresponds to which option.

Have one option default selected.

Review

Result from the latest accessibility review of the component (Chlorophyll, React): 2023-02-22

• Visual: Some minor graphical center problems
• Contrast: good
• Colour-blindness: good
• Dark-mode: n/a
• Code + aria: ok
• Touch + keyboard: good
• Focus: ok - need new style
• Reader: ok - says required invalid entry, should have better example text

• Details: Specification in Figma
• Instruction: How to access Figma

Error handling