Used when there is a list of two or more mutually exclusive options and the user must select one choice. An option will be selected by default and clicking any other non-selected radio option makes it the active selection.
The unselected radio button style has a width and height of
17 with a
white background and a solid
1 border using the
border color. The label is the standard copy color at
On selection the circle is filled with
link color and a
white circle in the centre. View the colors rules.
8 between the radio button and the label and
29 between the radio selectors.
If required, you also have the ability to include subtext. There are two types of subext available to use with radio buttons. The first follows data chunks rules and is used as a label.
The second can be used if the context is not suitable for a label, such as a description or short sentence. This optional subtext should be
Proxima Nova Regular at
Grey darken 3. View typography rules.
It is important to provide the user with a consistent experience. Therefore we recommend that if you need to use subtext for a radio button, do so for all radio buttons and use the same subtext styling.
When creating more complex forms it’s sometimes required to add radio button functionality with a little more visual punch. This helps clearly show what you’re selecting and what the available options are. Horizontal sizing of these is flexible based on the container requirements.
It’s important to remember that you can still only select one item as per the expected behaviour of a radio button.
16 sizing rules apply here. The label font size is
16. The border uses the
internal border color with rounded corners with a radius appropriate to the platform standard at the edges. On selection the border is removed and is filled with the
If required you also have the ability to include subtext. This follows the data chunks rules.
This isn’t used often but can be useful for long lists that scroll off the screen.
Icons float above and are centre aligned. Spacing follows the data chunks conventions.
In some cases it is particularly important for the component to have more prominence on the screen. This provides more of a focus for the user. Options are stacked vertically and fill the full width of their container. Copy is aligned to the left. A traditional radio marker is used to indicate selection state. This is aligned to the right of each cell and vertically centered.
In cases where choosing an option allows for further granular configuration, the selected cell can, when appropriate, expand to reveal this. The title area of the selected cell remains in the selected state but the expanded area uses a
white background and a
link colored border to show the connection between the two.