Controls

Controls for users to customize their experience.

Light Switch

<tk-light-switch
  aria-label="Invisibility cloak"
  is-checked="false"
  on-check="yourMethod()">
</tk-light-switch>

Description

Light switches help communicate access to a feature and/or piece of functionality. We use --interface-primary to denote “on” and --interface-secondary-light to denote “off.”

Note: if integrating into an Angular app, the attributes will need to be camelcase and wrapped in as inputs.

Light Switch: Disabled

<tk-light-switch
  aria-label="Invisibility cloak"
  is-checked="false"
  is-disabled="true"
  on-check="yourMethod()">
</tk-light-switch>

Accessibility

  • We automatically append “enable” or “disable” to the aria-label. Please consider this when choosing a label.