toggle-switch by a8z

A toggle switch build with pure CSS, that can be used in forms as input checkboxes.

Preview

Installation

CSS

<link rel="stylesheet" href="build/toggle-switch.css">

HTML

<label class="a8z-toggle-switch">
	<input checked type="checkbox" id="ID_HERE">
	<span class="toggle">
		<span class="switch"></span>
	</span>
</label>

Options

Option	Data Attribute
Rounded	data-style="rounded"
Square	data-style="square"
No Text	data-text="false"
Disabled	add the disabled attribute to the input tag
Checked	add the checked attribute to the input tag
Sizes	data-size="xl" data-size="lg" medium (default) data-size="sm" data-size="xs"
Colors	data-color="red" data-color="orange" data-color="yellow" data-color="green" data-color="blue" data-color="purple" data-color="gray" data-color="brown" data-color="pink" data-color="indego" data-color="teal"
Labels	data-label="left" label on right (default)
content text / width	use the style attribute to modify the css variables style="--a8z-ts-input-checked-content:'VISIBLE'; --a8z-ts-input-unchecked-content: 'HIDDEN'; --a8z-ts-width: 90px;"

Features

• CSS only - no JavaScript!
• No dependencies
• Fully reponsive
• Fully customizable (change input content text / widht)
• Fully self contained
• 11 color schemes
• Labels on the left and the right
• Keyboard Accessible - accessibility (a11y)
• Focus Styles - accessibility (a11y)
• Supports all modern browsers
• Search engine friendly
• Screen reader friendly
• Doesn't dump a bunch of global styles that'll screw with your other CSS
• Everything is customizable with scss variables if using the scss source file
• Everything is customizable if overwriting the css variables in the a8z-toggle-switch class