Radio button
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 checkbox can be displayed in the different main states.
Unckecked radio button
The unchecked radio button is an empty circle.
Checked radio button
The checked radio button is filled and displays a small dot in its center.
Specs
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.
Components
1
Container
2
Dot
Colors
The container switches style when it is checked.
Element
Color / Style
1
Unchecked container
style-indent
2
Checked container
style-raised
3
Dot
color-ui-element-active-inverted
Measures and spacing
The measurements are the same in both unchecked and checked states, but the dot are only visible in the checked state.
1
Component measures
2
Spacing
3
Border sizes
States
The look of the states are defined by the style.
Unchecked
Container
style-indent-enabled
Hover
Container
style-indent-hover
Pressed
Container
style-indent-pressed
Focused
Container
style-normal-focused
Disabled
Container
style-thumb-disabled
Checked
Container
style-raised-enabled
Dot
color-ui-element-active-inverted