Accessible CSS Only Toggle Switches

Author: ghinda
Views Total: 2,792 views
Official Page: Go to website
Last Update: August 6, 2018
License: MIT


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>



See also  Tiny 12-column Flexbox Grid - ragrid.css

Leave a Reply

Your email address will not be published. Required fields are marked *