Updated on 18 June 2017

Docs are work in progress, check open issues and see how you can help!

Checkbox component is a button that can be either checked or unchecked (by default or manually). Usually you use checkboxes to allow user to select multiple options from a set.

Checkbox uses the same state configuration as Button — focused state has additional background layer with 0.02 opacity, clicked state has additional background layer with 0.04 opacity.


Inverse Checkbox is used on colored backgrounds, but has the same properties as regular one.


// Base

$checkbox-border-width                     : unit(0.25);
$checkbox-border-radius                    : radius(default);
$checkbox-size                             : unit(6);
$checkbox-label-margin-left                : unit(2);

$checkbox-color                            : palette(cg4);
$checkbox-checked-color                    : palette(cp1);

$checkbox-border-color                     : currentColor;

// Themes

$checkbox-inverse-color                    : palette(cg9);
$checkbox-inverse-checked-color            : palette(cg9);

// Text

$checkbox-text-type                        : 'body';
$checkbox-inverse-text-theme               : 'inverse';

// States

$checkbox-focused-darkness-unit            : 0.02;
$checkbox-clicked-darkness-unit            : ($checkbox-focused-darkness-unit * 2);
$checkbox-disabled-opacity-unit            : ($checkbox-focused-darkness-unit * 24);

$checkbox-focused-background-color         : rgba(palette(cg7), $checkbox-focused-darkness-unit);
$checkbox-clicked-background-color         : rgba(palette(cg7), $checkbox-clicked-darkness-unit);
$checkbox-checked-background-color         : palette(cp1);
$checkbox-checked-focused-background-color : rgba(palette(cp1), $checkbox-focused-darkness-unit);
$checkbox-checked-clicked-background-color : rgba(palette(cp1), $checkbox-clicked-darkness-unit);

$checkbox-inverse-focused-background-color : rgba(palette(cg9), $checkbox-focused-darkness-unit);
$checkbox-inverse-checked-background-color : palette(cg9);
$checkbox-inverse-clicked-background-color : rgba(palette(cg9), $checkbox-clicked-darkness-unit);


name type default
inverse true / false false
checked true / false false
disabled true / false false
text string ’’