Components
Radio pill
Radio pill comes in two variants: Standard and as a buttons in a group.
Branding
Checkboxes and radios has support for custom branding.
How to generate and implement new branding
Internal use (Trinidad)
Properties
Radio
Prop name | Type | Default Value | Description |
---|---|---|---|
branding | string | ||
checked | bool | ||
children | node | ||
className | string | ||
classes | string | ||
data | arrayOf | ||
defaultChecked | bool | ||
disabled | bool | ||
id | string | ||
inline | bool | ||
labelProps | shape | ||
minWidth | string | ||
name | string | ||
onChange | func | ||
value | union |
RadioGroup
Prop name | Type | Default Value | Description |
---|---|---|---|
children | node | ||
className | string | ||
id | string | ||
inline | bool | ||
minWidth | string | ||
multipleLines | bool | ||
size | union | ||
thin | bool |
RadioButton
Prop name | Type | Default Value | Description |
---|---|---|---|
branding | string | ||
checked | bool | ||
children | node | ||
className | string | ||
data | array | ||
defaultChecked | bool | ||
disabled | bool | ||
id | string | ||
inline | bool | ||
inverted | string | ||
label | string | ||
labelClass | string | ||
minWidth | string | ||
name | 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