Accessible CSS Only Toggle Switches

Category: CSS & CSS3 , Form , Recommended | August 6, 2018
Views Total:3,217 views
Official Page:Go to website
Last Update:August 6, 2018


Accessible CSS Only Toggle Switches


A pure CSS approach to creating beautiful, accessible toggle switches from checkboxes and radio buttons. Compatible with Bootstrap and Foundation CSS frameworks.

Basic usage:

To get started, you need to include the toggle-switch.css in the head section of the html document.

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

The sample Html to create toggle switches.

<label class="switch-light switch-candy" onclick="">
  <input type="checkbox">
<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>
  <input id="day" name="view" type="radio">
  <label for="day" onclick="">Day</label>
<div class="switch-toggle switch-candy">
  <input id="hour3" name="view3" type="radio" checked>
  <label for="hour3" onclick="">Hour</label>
  <input id="day3" name="view3" type="radio">
  <label for="day3" onclick="">Day</label>
  <input id="week3" name="view3" type="radio">
  <label for="week3" onclick="">Week</label>
  <input id="month3" name="view3" type="radio">
  <label for="month3" onclick="">Month</label>
  <input id="year3" name="view3" type="radio">
  <label for="year3" onclick="">Year</label>
  <input id="decade3" name="view3" type="radio">
  <label for="decade3" onclick="">Decade</label>



  • Bootstrap 4 compatible

You Might Be Interested In:

Leave a Reply