Simple CSS Toggle Switch Library – a8z

Preview:

Description:

a8z is a CSS library that adds elegant and customizable toggle switches to your web apps. Inspired by Toggle Switchy.

Works with the native checkbox element and comes with various predefined styles, including square, rounded, and iOS.

How to use it:

1. Download and import the a8z toggle switch library.

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

2. Create a default toggle switch from a checkbox input.

<label class="a8z-toggle-switch">
  <input checked type="checkbox" id="example_default_1">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

3. Set the size of the switch using the data-size attribute. Available values:

• xl
• lg
• sm
• xs

<label class="a8z-toggle-switch" data-size="xl">
  <input checked type="checkbox" id="example_default_1">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

4. Change the theme of the switch using the data-style attribute. Available values:

• rounded
• square

<label class="a8z-toggle-switch" data-style="rounded">
  <input checked type="checkbox" id="example_default_1">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

5. Determine whether to hide the text inside the toggle switch.

<label class="a8z-toggle-switch" data-text="false">
  <input checked type="checkbox" id="example_default_1">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

6. Set the primary color of the toggle switch using the data-color. Available colors:

• red
• orange
• yellow
• green
• blue
• purple
• gray
• brown
• indigo
• pink
• teal

<label class="a8z-toggle-switch" data-color="red">
  <input checked type="checkbox" id="example_default_1">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

7. Append a label to the toggle switch.

<label class="a8z-toggle-switch">
  <input checked type="checkbox" id="example_default_1">
  <span class="toggle">
    <span class="switch"></span>
  </span>
  <span class="label">Label on right</span>
</label>

<label class="a8z-toggle-switch">
  <input checked type="checkbox" id="example_default_1" data-label="left">
  <span class="toggle">
    <span class="switch"></span>
  </span>
  <span class="label">Label on left</span>
</label>