Components
Checkbox
Checkbox comes in two variants: Standard and as buttons in group.
Branding
Checkboxes and radios has support for custom branding.
How to generate and implement new branding
Internal use (Trinidad)
Properties
Checkbox
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| name | string | `checkbox-${Math.random()}[]` | |
| id | string | `checkbox_${name}_${value ?? Math.random()}` | |
| noLabel | bool | false | |
| branding | string | ||
| checked | bool | ||
| children | node | ||
| className | string | ||
| classes | string | ||
| data | arrayOf | ||
| defaultChecked | bool | ||
| disabled | bool | ||
| inline | bool | ||
| labelProps | shape | ||
| minWidth | string | ||
| onChange | func | ||
| value | union |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
Less Mixins for trinidad users
To generate a new theme for checkboxes / radios:
.form-toggle-stryktipset {
.form-toggle-create-theme(...)
}
Params:
@default : Prominent Color
@default-text : Prominent Text Color
@selected : Base fill color on Selected
@selected-text : Text on selected color
@button-fill : Button base color
@disabled-fill : Disabled base color
@disabled-text : Disabled text-color
@group-border: : Border around groups
@group-button: : Button background in group
