Accessible CSS Only Toggle Switches

Preview:

Description:

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">
  <strong>
    Wireless
  </strong>
  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
</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>
  <input id="day" name="view" type="radio">
  <label for="day" onclick="">Day</label>
  <a></a>
</div>
<label>View</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>
  <a></a>
</div>

Changelog:

08/06/2018

• Bootstrap 4 compatible