Components – legacy
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)

// Less mixins
.form-toggle-my-brand {
  .form-toggle-create-branding(...)
}

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

Properties

Checkbox

Prop name	Type	Default Value
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

Search the design system