Checkbox

Checkboxes lets the user pick one or more options within a set of options. It is also used to enable and disable an option.

Variations

The checkbox can be displayed in the different main states.

Unckecked checkbox

The unchecked checkbox is an empty box.

Mixed checkbox

A mixed state is used if it is a checkbox option that controls multiple child options, but the child options are in different states.

Checked checkbox

The checked checkbox is filled and displays a checkmark.

Specs

How the component are built up and styled in both unchecked and checked state.

Anatomy

The checkbox is built up by a container and an icon displayed in a checked state.

Components
1
Container
2
Icon

Colors

The track switches style when it is on.

Element
Color / Style
1
Unchecked container
style-indent
2
Checked container
style-raised
3
Icon
color-ui-element-active-inverted

Measures and spacing

The measurements are the same in both enabled and on states, but in the on state it is flipped horizontally.

1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Unchecked
Checkbox container
style-indent-enabled
Hover
Checkbox container
style-indent-hover
Pressed
Checkbox container
style-indent-pressed
Focused
Checkbox container
style-normal-focused
Disabled
Checkbox container
style-thumb-disabled
On
Checkbox container
style-raised-enabled
Icon color
color-ui-element-active-inverted