This component enables users to select either one option at a time or multiple with checkboxes, radio buttons and toggle switches.
Option types
Checkbox
Radio button
Usage
Toggle
Toggles are most effective for changing system settings or preferences, such as the states of system functionality. For instance, using a toggle is a good choice when you want to give users the option to turn on or off email alerts.
Binary answer selection
Radio buttons are often used for questions with binary or opposite answers, such as yes or no, or true or false. They can also be aligned horizontally in this context.
The exception to this rule is settings with an on or off option, where toggle switches would be a more suitable choice.
Hit area
Hit area must surround both input and label for accessibility.
Label alignment
When there are three or more options, it is recommended to align labels to the left and arrange them in a vertical stack. This approach makes it easier for users to scan and read through the options, especially when the label text wraps onto multiple lines.
Radio buttons can be aligned horizontally if there are only two items.
Interactions
States
Behaviour
Style
Microcopy guidelines
Input labels
Keep labels to 5 words and under. Long labels cause visual noise especially if they repeat.
Give labels descriptive meanings.
Do: Material topics
Don't: Choose material topics
Learn more about microcopy
Read our articles on best practice for writing text for UI and learning more about our language.