Create Custom Switches With Checkboxes – Toggle Switchy

Category: Form , Javascript | March 17, 2020
Author: adamculpepper
Views Total: 174
Official Page: Go to website
Last Update: March 17, 2020
License: MIT

Preview:

Create Custom Switches With Checkboxes – Toggle Switchy

Description:

Toggle Switchy is a pure CSS library which converts the native checkbox inputs into responsive, accessible, SEO-friendly toggle switches with custom styles, sizes, colors, labels, and more.

See Also:

How to use it:

1. Just download and insert the stylesheet toggle-switchy.css into the document and done.

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

2. Markup the HTML to create a basic toggle switch.

<label class="toggle-switchy" for="example" data-size="">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

3. Specify the switch size in the data-size attribute:

<label class="toggle-switchy" for="example" data-size="xl">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

<label class="toggle-switchy" for="example" data-size="lg">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

<label class="toggle-switchy" for="example" data-size="sm">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

<label class="toggle-switchy" for="example" data-size="ms">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

4. Make the border rounded to create an iOS-style toggle switch.

<label class="toggle-switchy" for="example" data-size="xl" data-style="rounded">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

5. Create a square toggle switch.

<label class="toggle-switchy" for="example" data-size="xl" data-style="square">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

6. Hide the on/off text in the toggle switch.

<label class="toggle-switchy" for="example" data-size="xl" data-text="false">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

7. Add custom labels to the toggle switch.

<label class="toggle-switchy" for="example" data-size="lg">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
  <span class="label">Label on right</span>
</label>

<label class="toggle-switchy" for="example" data-size="lg" data-label="left">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
  <span class="label">Label on left</span>
</label>

8. Change the background color using the data-color attribute:

  • red
  • orange
  • yellow
  • green
  • blue
  • purple
  • gray
<label class="toggle-switchy" for="example" data-size="lg" data-color="red">
  <input checked type="checkbox" id="example">
  <span class="toggle">
    <span class="switch"></span>
  </span>
</label>

Changelog:

03/17/2020

  • Fixed the inline-flex bottom spacing issue

You Might Be Interested In:


Leave a Reply