Controls

Controls for users to customize their experience.

Light Switch

Invisibility cloak

<div class="l-flex">
  <tk-label
    id="light-switch-label"
    class="mr-2x"
  >
    Invisibility cloak
  </tk-label>
  <tk-light-switch
    aria-labelledby="light-switch-label"
    is-checked="false"
    on-check="yourMethod()">
  </tk-light-switch>
</div>

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

Invisibility cloak

<div class="l-flex">
  <tk-label
    id="light-switch-label-disabled"
    class="mr-2x"
  >
    Invisibility cloak
  </tk-label>
  <tk-light-switch
    aria-labelledby="light-switch-label-disabled"
    is-checked="false"
    is-disabled="true"
    on-check="yourMethod()">
  </tk-light-switch>
</div>

Accessibility

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