CSS Toggle Switch

Accessible CSS toggle switch using standard form controls

Light switch

Use the light switch, instead of a checkbox, for simple “On/Off” options.

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more, specific options.

bower install --save css-toggle-switch
component install ghinda/css-toggle-switch
You can use the switches standalone, with Bootstrap or with Foundation.

Light switch

Use the light switch, instead of a checkbox, for simple “On/Off” options.

<label class="switch-light switch-candy" onclick="">
	<input type="checkbox">
	<span>
		Wireless
		<span>Off</span>
		<span>On</span>
	</span>

	<a></a>
</label>

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more specific options.

<label>View</label>
<div class="switch-toggle switch-candy">
	<input id="week" name="view" type="radio" checked>
	<label for="week" onclick="">Week</label>

	<input id="month" name="view" type="radio">
	<label for="month" onclick="">Month</label>

	<a></a>
</div>

Multiple options

You can add up to 5 items by using the .switch-3, .switch-4 and .switch-5 classes.

<label>View</label>
<div class="switch-toggle switch-5 switch-candy yellow">
	[…]

Themes

There are three themes included with the switches.

Candy

It includes three color schemes: the default green, .switch-candy-blue and .switch-candy-yellow.

Android

iOS

Browser support

The toggle switches work on all modern browsers, including mobile ones(even proxy-browsers like Opera Mini).

Browsers without support for media-queries, such as IE8 and bellow, get standard form elements.

The onclick="" attribute is required for older iOS and Opera Mini support.

Acknowledgements