Checkbox

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

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




Specifications

// 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);

API

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