Switch
A Switch is a form element that allows a user to select and unselect a value that has a clear on and off state.
Usage
Place the switch within a form. Each switch must have 2 associated labels. The label for attribute must be identical to the input id attribute.
Both labels should go after the the input. The first label is the default state and the second label is the active state.
To disable the switch whilst keeping it visible, add the disabled attribute to the form control.
Accessible attributes
| Accessible attribute | Description |
|---|---|
role="group" |
Container for a group of checkboxes |
aria-checked="false" |
Identifies checkboxes which are not checked. |
aria-checked="true" |
Identifies checkboxes which are checked. |
forms\switch-input.hbs
<form>
<fieldset class="slb-form__group" aria-label="Switch Example" role="group">
<legend class="sr-only">Switch Example</legend>
<input type="checkbox" class="slb-form__control-switch" name="switchExampleOne" id="switchExampleOne" aria-checked="false">
<span class="slb-form__switch"></span>
<label class="slb-form__label" for="switchExampleOne">Off</label>
<label class="slb-form__label" for="switchExampleOne">On</label>
</fieldset>
<fieldset class="slb-form__group" aria-label="Switch Example" role="group">
<legend class="sr-only">Switch Example</legend>
<input type="checkbox" class="slb-form__control-switch" name="switchExampleTwo" id="switchExampleTwo" aria-checked="false" disabled>
<span class="slb-form__switch"></span>
<label class="slb-form__label" for="switchExampleTwo">Off</label>
<label class="slb-form__label" for="switchExampleTwo">On</label>
</fieldset>
</form>
Source:
components/forms/_form-control-toggle-switch.scss