Checkbox
Updated:
January 30, 2020
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.
Checked checkbox
The checked checkbox is filled and displays a checkmark.
Checked checkbox
The checked checkbox is filled and displays a checkmark.
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.
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.
Unckecked checkbox
The unchecked checkbox is an empty box.
Unckecked checkbox
The unchecked checkbox is an empty box.
Component building blocks
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.
Colors and styles
The checkbox changes style set when it is in a checked state.
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.
