Updated on 18 June 2017

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

Radio component is a button that can be either checked or unchecked (by default or manually). Usually you use radio to allow user to select single option from a set.

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


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


// Base

$radio-border-width                            : unit(0.25);
$radio-border-radius                           : radius(round);
$radio-size                                    : unit(6);
$radio-checker-size                            : unit(2);
$radio-label-margin-left                       : unit(2);

$radio-color                                   : palette(cg4);
$radio-checked-color                           : palette(cg9);
$radio-border-color                            : currentColor;

// Inverse

$radio-inverse-color                           : palette(cg9);
$radio-inverse-checked-color                   : palette(cp1);

// Text

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

// States

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

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

$radio-inverse-focused-background-color        : rgba(palette(cg9), $radio-focused-darkness-unit);
$radio-inverse-clicked-background-color        : rgba(palette(cg9), $radio-clicked-darkness-unit);
$radio-inverse-checked-background-color        : palette(cg9);
$radio-inverse-checked-border-color            : palette(cg9);
$radio-inverse-checked-focused-background-color: rgba(palette(cg9), $radio-focused-darkness-unit);
$radio-inverse-checked-clicked-background-color: rgba(palette(cg9), $radio-clicked-darkness-unit);
name type default
inverse true / false false
checked true / false false
disabled true / false false
text string ’’