Toggle
A Toggle is a form element that allows a user to select and unselect a value that has no clear on and off state.
Usage
Place the toggle within a form. Each toggle must have 2 associated labels. The label for attribute must be identical to the input id attribute.
One label should go before the input and one label should go after the input to describe the different states.
To disable the toggle 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\toggle-input.hbs
<form>
<fieldset class="slb-form__group" aria-label="Toggle Example" role="group">
<legend class="sr-only">Toggle Example</legend>
<label class="slb-form__label" for="toggleExampleOne">Left</label>
<input type="checkbox" class="slb-form__control-toggle" name="toggleExampleOne" id="toggleExampleOne" aria-checked="false">
<span class="slb-form__toggle"></span>
<label class="slb-form__label" for="toggleExampleOne">Right</label>
</fieldset>
<fieldset class="slb-form__group" aria-label="Toggle Example" role="group">
<legend class="sr-only">Toggle Example</legend>
<label class="slb-form__label" for="toggleExampleTwo">Left</label>
<input type="checkbox" class="slb-form__control-toggle" name="toggleExampleTwo" id="toggleExampleTwo" aria-checked="false" disabled>
<span class="slb-form__toggle"></span>
<label class="slb-form__label" for="toggleExampleTwo">Right</label>
</fieldset>
</form>
Source:
components/forms/_form-control-toggle-switch.scss