Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

MoreToggles.css

Toggles 1.png

release badge jsDelivr hits badge license badge


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.

Check out all available styles here

Features

🔹 Pure CSS

🔹 13 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@0.2.1/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 13 different styles. And for each style, several color patterns 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

Yes No Style mt-yesno mt-yesno-garden mt-yesno-matte mt-yesno-fruit mt-yesno-blush

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

Import Only a Single Style

If you care about the size of CSS files. Instead of import moretoggles.min.css, you can import the styles you want sepsrately.

In the /output folder, you can find all of the built CSS files. The naming convention is moretoggles.STYLE_NAME.min.css

Example for importing only Android Style

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

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>

License

MoreToggles.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)

Contributing

This project is still in very early stage. Your contribution is very welcome. Feel free to submit a pull request!

About

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

Topics

Resources

License

Packages

No packages published