Switch

Migrating the Switch Component

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

1<div class="form-check form-switch">
2  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
3  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
4</div>

PUIK

Basic Use

For any switch component that you use, replace the structure above with the following structure:

1<div class="puik-switch__group">
2  <label for="switch-id" id="label-id" class="puik-switch__label puik-switch__label--left">Label</label>
3  <button class="puik-switch" id="switch-id" role="switch" type="button" aria-checked="false" aria-labelledby="label-id">
4    <span class="puik-switch__toggle"></span>
5  </button>
6</div>
info
For accessibility reasons, once clicked, aria-checked should set to true.

Disabled

A switch can be disabled by adding the disabled attribute to the button:

 1<div class="puik-switch__group">
 2  <label for="switch-id" id="label-id" class="puik-switch__label puik-switch__label--left">Label</label>
 3  <button
 4    class="puik-switch"
 5    disabled
 6    id="switch-id"
 7    role="switch"
 8    type="button"
 9    aria-checked="false"
10    aria-labelledby="label-id"
11  >
12    <span class="puik-switch__toggle"></span>
13  </button>
14</div>
← Spinner Loader
Table →