Chlorophyll
Styles
Radio button
The radio button, always used as a set of at least two, allows the user to select only one of the presented options.
Available in
React
Javascript
Component meta
Component identifier
- component-radiobutton
Tags
- Global
Design version
- 2022-11-20
Design principles
- Everyday first
Guidelines
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.
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.
Writing
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.
DO (bild)
DON’T (bild)
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
DO (bild)
DON’T (bild)
You-form and I-form, we, the bank talk 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.
Example:
DO (bild)
DON’T (bild)
Prevent redundancy
Keep the text to the point by excluding the I-form in some contexts.
DON’T (bild)
INSTEAD, DO (bild)
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.
(bild)
Accessibility
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: bad - gray against gray
- Code + aria: ok Touch + keyboard: good
- Focus: ok - need new style
- Reader: ok - says required invalid entry, should have better example text
