Radio

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

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




Specifications

// 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);
API
name type default
inverse true / false false
checked true / false false
disabled true / false false
text string ’’