/ Toggle

A pure CSS library that provides you with a variety of nice-looking toggles

A pure CSS library that provides you with a variety of nice-looking toggles

MoreToggles.css

MoreToggles.css is a pure CSS library that provides you with a variety of nice-looking toggles.

You only have to add a new ClassName to the wrapper div and MoreToggles.css will do the magic for you.

Features

🔹 Pure CSS

🔹 12 different styles (more styles are coming)

🔹 Perfect scaling

Usage

Import the stylesheet into your document's <head>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>

Wrap an extra div around your <input> and <label>. Pick a style here
. Add the corresponding mt-* class to <div>.

<div class="mt-ios"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

Styles

MoreToggles.css currently has 12 different styles. And for each style, several color palettes are provided.

Check out all available styles here

List of all the available class names:

IOS Style
mt-ios mt-ios-red mt-ios-blue

Android Style
mt-android mt-android-indigo mt-android-violet mt-android-pink mt-android-orange

IO Switch Style
mt-io mt-io-yellow mt-io-garden mt-io-navi mt-io-violet

Normal Style
mt-normal mt-normal-garden mt-normal-navi mt-normal-violet mt-normal-juice

Transparent Style
mt-transparent mt-transparent-navi mt-transparent-violet mt-transparent-blood mt-transparent-brown

Check Style
mt-check mt-check-garden mt-check-matte mt-check-fruit mt-check-pink

Square Style
mt-square mt-square-garden mt-square-tomato mt-square-matcha mt-square-pink

Square 3d Style
mt-square3d mt-square3d-garden mt-square3d-tomato mt-square3d-matcha mt-square3d-blush

Emoji Style
mt-emoji-mood mt-emoji-gender mt-emoji-pet mt-emoji-mute mt-emoji-like

Star Style
mt-star mt-star-garden mt-star-tomato mt-star-pink mt-star-golden

Heart Style
mt-heart mt-heart-blush mt-heart-indigo mt-heart-pink mt-heart-golden

Icon Switch Style
mt-icon-music mt-icon-ring mt-icon-mic mt-icon-cam mt-icon-pin

Scaling

You can scale the toggles by assign a font-size attribute style="font-size:10px;" to the wrapper div. You can try different numbers and the toggle will scale smoothly.

<div class="mt-ios" style="font-size:10px;">
  <input id="3" type="checkbox" />
  <label for="3"></label>
</div>

Disabled Toggles

Just like regular checkbox, you can add disabled attribute to <input> tag.

<div class="mt-ios">
  <input id="4" type="checkbox" disabled/>
  <label for="4"></label>
</div>

Listening to the change event

Since the toggle is actually an <input> with type="checkbox", you can use addEventListener to listen to the onchange event.

<div class="mt-ios"> 
  <input id="5" type="checkbox" />
  <label for="5"></label>
</div>

<script>
  const toggle = document.getElementById('5');

  toggle.addEventListener('change', (event) => {
    if (event.target.checked) {
      alert('checked');
    } else {
      alert('not checked');
    }
  });
</script>

Notice

Nest the <input> directly inside the <label> is NOT supported, although it is valid HTML syntax.

Don't ☚ī¸

<div class="mt-ios"> 
  <label>
    <input type="checkbox" />
  </label>
</div>

Do 😃

<div class="mt-ios"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

GitHub

CodeTea

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More