Switch

Overview

Use the switch to replace 2 binary radio input choices like Yes or No when it serves the design.

Unchecked:

Checked:

Usage

Dependencies

To get the switch component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/icon';
@import 'design-system/src/scss/01-atoms/switch';

include /node_modules/design-system/src/pug/01-atoms/switch

import Tooltips from 'design-system/src/js/01-atoms/switch';

Basic code

A switch component is composed by a button which has the class switch, it has 2 aria attributes, aria-checked reflecting the state of the switch and an aria-label used as label for screen readers.

The switch contains 3 span used for states and the knob:

• .switch__true used for the true state.
• .switch__false used for the false state.
• .switch__knob used for the knob.

<button class="switch" role="switch" aria-checked="false" aria-label="Aria label">
  <span class="switch__true" aria-hidden="true">
    <svg class="icon icon--16" aria-hidden="true">
      <use xlink:href="/img/sprite.svg#icon-check-mark"></use>
    </svg>
  </span>
  <span class="switch__false" aria-hidden="true">
    <svg class="icon icon--16" aria-hidden="true">
      <use xlink:href="/img/sprite.svg#icon-cross"></use>
    </svg>
  </span>
  <span class="switch__knob" aria-hidden="true"></span>
</button>

button.switch(role='switch', aria-checked='false', aria-label='Aria label')
  span.switch__true(aria-hidden='true')
    svg.icon.icon--16(aria-hidden='true')
      use(xlink:href='/img/sprite.svg#icon-check-mark')
  span.switch__false(aria-hidden='true')
    svg.icon.icon--16(aria-hidden='true')
      use(xlink:href='/img/sprite.svg#icon-cross')
  span.switch__knob(aria-hidden='true')

Switch();

Pug mixin

A pug mixin is available to implement the switch with ease, find the parameters below:

+switch(value, ariaLabel, svgUrl)

HTML attributes

aria-checked

Change the state of the switch by using the aria-checked attribute.

false:

true:

// Set to false
<button class="switch" role="switch" aria-checked="false" aria-label="Aria label">

// Set to true
<button class="switch" role="switch" aria-checked="true" aria-label="Aria label">

// Set to false
button.switch(role='switch', aria-checked='false', aria-label='Aria label')

// Set to true
button.switch(role='switch', aria-checked='true', aria-label='Aria label')