Radio Button
Overview
Radio Buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.
Usage
When to use:
- Forms of any kind.
- Settings: used to change from one setting to another.
- Selection in lists: used to choose a singular item within a list or table.
Anatomy
Properties
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework. In Figma, these are defined as properties that help define each variant.
Heads up
A star or asterisk symbol (*) can be used as a prefix to some Figma component properties in order to inform that the corresponding property is only used that way on the design side (Figma component libraries).
◇❖ Component: Radio Button Group
| Property | Values | Default |
|---|---|---|
| size | small / medium / large | medium |
| color | primary / neutral | primary |
| items | 2 to 10 | 3 |
❖ Component: Radio Button
| Property | Values | Default |
|---|---|---|
| size | small / medium / large | medium |
| color | primary / neutral | primary |
| state | default / hover / focused / pressed | default |
| error | true / false | false |
| disabled | true / false | false |
| checked | boolean | true |
| label | text | “Label” |
| *hasCaption | boolean | false |
| *caption | text | “Caption” |
Behaviour
Sizes
Radio buttons are available in three sizes to cater for the diverse range of use cases and devices that our business uses.
By default, the medium radio button is used typically for desktop/tablet devices. But for mobile devices, it is advised that you upscale the radio button, to increase the touch area.
For more information about target size, check out W3’s website.
Emphasis
By default, radio buttons are emphasized (primary theme). Providing a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a radio button is required.
For visual components, like application panels, where a radio button shouldn’t be a standout element, choose the neutral theme to de-emphasize its visual presence on the screen.
Error
Radio buttons can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.
Text overflow
When the label is too long for the horizontal space available, it can be wrapped to form another line. Use the following steps in order to configure the TDS component to do this:
- Set ‘Label Base’ text layer to fill container (horizontally).
- Set ‘input-and-label’ layer to fill container (horizontally).
- Set ‘Base - Radio Button’ layer to fill container (horizontally).
- Set ‘Radio Button’ layer to fill container (horizontally).
Internationalization
For RTL (right-to-left) languages, the layout of the radio button is mirrored. The radio button input is placed on the right side of the text.
To build your own (BYO) version of this, either detach the Radio Button component or use the Radio Button Input component with the correct font scale and spacing as seen in the LTR version.
Usage Guidelines
Use radio buttons for mutually exclusive options
- Don’t: use radio buttons if a user needs to select as many options as desired (or none).
- Do: use checkbox groups if the selection only requires a single option from a list of mutually exclusive options.
When to choose a radio button over a switch
- Don’t: use a radio button to communicate activation (e.g. on/off states) as they can have an error state and this could confuse users about the action they’re about to take.
- Do: use a radio button for communicating selection of mutually exclusive options.
Label groups of related radio buttons
- Don’t: expect the users to understand a group of radio buttons, if they are not provided with a header or caption text.
- Do: provide a label with your radio buttons to describe what the list of options represents and guides the users in what to do. Especially for those using a screen reader.
Text wrapping
- Don’t: vertically centre wrapped text with the radio button.
- Do: let the text wrap beneath the radio button so the control and the label are top aligned.
