Fork me on GitHub

CSS Toggle Switches

Accessible, CSS-only toggle switches with full keyboard access and mobile support, using standard form controls.

These examples use Bootstrap, you can also use the switches alone, or with Foundation.

Download 
bower install --save css-toggle-switch
component install ghinda/css-toggle-switch

The toggle switches are very flexible, so you can use a number of classes provided by Bootstrap, to make them look and act exactly as you need them. 

<label class="checkbox toggle well" onclick="">
	<input id="view" type="checkbox" checked />
	<span>
		Wireless
		<span>Off</span>
		<span>On</span>
	</span>
	<a class="btn btn-primary slide-button"></a>
</label>

<label>View: </label>
<div class="well switch">
	<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>

	<span class="slide-button btn btn-info"></span>
</div>

<form class="form-horizontal">
	<div class="form-group">
		<label class="control-label col-lg-2">View</label>
		<div class="col-lg-10">
			<div class="well switch">
				<input id="week2" name="view" type="radio" checked>
				<label for="week2" onclick="">Week</label>

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

				<span class="slide-button btn btn-default"></span>
			</div>
		</div>
	</div>
</form>

<form class="form-horizontal">
	<div class="form-group">
		<label class="control-label col-lg-2">View</label>
		<div class="col-lg-10">
			<div class="btn switch switch-3">
				<input id="week3" name="view" type="radio" checked>
				<label for="week3" onclick="">Week</label>

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

				<input id="year3" name="view" type="radio">
				<label for="year3" onclick="">Year</label>

				<span class="slide-button btn btn-success"></span>
			</div>
		</div>
	</div>
</form>

<form class="form-horizontal">
	<div class="control-group">
		<label class="control-label col-lg-2">View</label>
		<div class="col-lg-10">
			<div class="switch switch-4 alert alert-success">
				<input id="week5" name="view" type="radio" checked>
				<label for="week5" onclick="">Week</label>

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

				<input id="month7" name="view" type="radio">
				<label for="month7" onclick="">Year</label>

				<input id="month8" name="view" type="radio">
				<label for="month8" onclick="">Decade</label>

				<span class="slide-button btn btn-info disabled"></span>
			</div>
		</div>
	</div>
</form>

<label>View</label>
<div class="alert alert-info switch switch-5">
	<input id="week9" name="view" type="radio" checked>
	<label for="week9" onclick="">Week</label>

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

	<input id="month11" name="view" type="radio">
	<label for="month11" onclick="">Year</label>

	<input id="month12" name="view" type="radio">
	<label for="month12" onclick="">Decade</label>

	<input id="month13" name="view" type="radio">
	<label for="month13" onclick="">Millenium</label>

	<span class="slide-button btn btn-warning"></span>
</div>