Toggle Switch

A two state toggle switch, for use when there is a definitive choice between two options. Each toggle switch must have a unique input id & corresponding for attribute to function independently.

On Off

<div class="Toggle">
	<input class="Toggle__input" type="checkbox" id="UNIQUE-ID" />
	<label for="UNIQUE-ID" class="Toggle__label">
		<span class="Toggle__description">
			<span class="Toggle__checked">On</span>
			<span class="Toggle__unchecked">Off</span>
		</span>
		<span class="Toggle__visible"></span>
	</label>
</div>