CheckboxInput
Open in Storybook Open in Figma
CheckboxInput lets users choose between two mutualy exclusive options.
Note that there is also a Switch component which fills a similar purpose, but as a button.
Basics
CheckboxInputs are usually placed below each other. The label can contain rich content.
Rules For Copywriters
- See the Checkbox section of the UI Content Guide.
Rules For Designers
- CheckboxeInputs are left-aligned. There is 20px vertical spacing between them.
Indeterminate state
CheckboxInputs can be in an indeterminate state. In this case a dash is rendered through the box and it means that it controls multiple things, some of which are currently checked while some others are not. However, the CheckboxInput itself still holds a value that is always either checked or not.
An enabled CheckboxInput always flips its value when the user toggles it. This means there is a behavioural difference between a checked indeterminate CheckboxInput and an unchecked indeterminate CheckboxInput even though they look the same.
HINT Try toggling the two indeterminate CheckboxInputs in the demo and notice how their state changes.
See Controlled Inputs Guide for an example of a controlled indeterminate CheckboxInput.
2-Column Layout WIP
WIP There is an ongoing discussion whether we should discontinue using checkboxes in a 2-column setup or not. Please consult the Design Team if you run into the challenge of creating or refactoring something like the 2-column example below. A solution will be provided as soon as the Form section gets updated.