Hero Image

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 nameTypeDefault ValueDescription
brandingstring
checkedbool
childrennode
classNamestring
classesstring
dataarrayOf
defaultCheckedbool
disabledbool
idstring
inlinebool
labelPropsshape
minWidthstring
namestring
onChangefunc
valueunion

RadioGroup

Prop nameTypeDefault ValueDescription
childrennode
classNamestring
idstring
inlinebool
minWidthstring
multipleLinesbool
sizeunion
thinbool

RadioButton

Prop nameTypeDefault ValueDescription
brandingstring
checkedbool
childrennode
classNamestring
dataarray
defaultCheckedbool
disabledbool
idstring
inlinebool
invertedstring
labelstring
labelClassstring
minWidthstring
namestring
onChangefunc
value *union

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.

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