
components
Checkbox
v.1.0.0 | SaturnUsage
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:
- label?: TypographyTypes;
- specialLabel?: TypographyTypes;
- checkbox?: CommonStyleType;
- container?: CommonStyleType;
- iconLabelWrapper?: CommonStyleType;
- frameContainer?: CommonStyleType;
- checkedIcon?: IconTypes;
- extraContentWrapper?: CommonStyleType;
- helpContentTextWrapper?: CommonStyleType;
- helpContent?: TypographyTypes;
- helperText?: TypographyTypes;
- specialHelperText?: TypographyTypes;
- errorWrapper?: CommonStyleType;
- errorIcon?: IconTypes;
- textError?: TypographyTypes;
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',