Go Main page
Go Main page

Web components

cover

components

Checkbox

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style the checkbox component is CHECKBOX_STYLES.

You can not change the name of the object of tokens.

Checkbox component has one way to modify the styles:

  • Variant: modify the styles of the Checkbox.

The structure of the CHECKBOX_STYLES object is:

Variants

Variants can modify the styles for each inner state of the checkbox. The inner states are:

Some of the props are being deprecated and they will be removed in the version 2.0.0:

  • CheckboxStateType's member ERROR will be replaced by ERROR_UNSELECTED and ERROR_SELECTED.
123456789
enum CheckboxStateType {
  DEFAULT_UNSELECTED
  DEFAULT_SELECTED
  DISABLED_UNSELECTED
  DISABLED_SELECTED
  ERROR_UNSELECTED
  ERROR_SELECTED
  ERROR
}

For each inner state the next tokens can be used:

12345678910
const CHECKBOX_STYLES = {
  [VARIANT]:{
    [STATE]: {
      label?: TypographyTypes;
      specialLabel?: TypographyTypes;
      checkbox?: CommonStyleType;
      checkedIcon?: IconTypes;
      extraContentWrapper?: CommonStyleType;
      helpContentTextWrapper?: CommonStyleType;
      helpContent?: TypographyTypes;

Example

checkbox theme object example:

12345678910
const CHECKBOX_STYLES = {
  [VARIANT]: {
    [STATE]: {
      helpContentTextWrapper: {
        border_style: 'border-style',
        border_width: 'border-width',
        padding: 'padding',
      },
      label: {
        font_variant: 'font-variant',