Branding & Style Guide

1.9 base.toggle_switch Toggle Switch

Toggle example guides Toggle HTML markup

Makes use of semantic HTML and clean UX to lessen cognitive load. Interaction enhanced with use of CSS transitions. Styling is done with checkbox input only to minimize need for custom code.

Example
Markup: base/toggle_switch.twig
<input type="checkbox" class="toggle" id="check_1" name="check_1" value="check_1">
	<label for="check_1">Standard Toggle</label>
<input type="checkbox" class="toggle" id="check_2" name="check_2" value="check_2" disabled="">
	<label for="check_2">Disabled Toggle</label>
Source: sass/base/_base.scss, line 605