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-blue to denote “on” and $interface-midnight--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.