Radio button
Updated:
March 15, 2020
Radio buttons enables a single option in a list of options. It is often used if there are many options available, and all of them should be visible.
Variations
The radio button can be displayed in both an unchecked and a checked state.
Unchecked
The unchecked radio button is a circle using the indent style.
Unchecked
The unchecked radio button is a circle using the indent style.
Checked
The checked radio button is filled and displays a small dot in its center.
Checked
The checked radio button is filled and displays a small dot in its center.
Component building blocks
How the component are built up and styled in both unchecked and checked state.
Anatomy
The radio button is built up by a container and a dot displayed in a checked state.
Colors and styles
The container switches style when it is checked.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
States
The look of the states are defined by the style.
