A pure CSS library that provides you with a variety of nice-looking toggles
MIT License
MoreToggles.css
is a pure CSS library that provides you with a variety of nice-looking toggles.
You only have to attach a class 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
Import the stylesheet into your document's <head>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/[email protected]/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>
npm install moretoggles
Import in js/jsx
// Import the minified CSS
import '../node_modules/moretoggles/output/moretoggles.min.css'
// Or
// import the Sass source file
import '../node_modules/moretoggles/src/moretoggles.scss'
Or import in Sass
@charset "utf-8";
@import "../node_modules/moretoggles/src/moretoggles";
MoreToggles.css
currently has 13 different styles. And for each style, several color patterns are provided.
Check out all available styles here
To choose a style, replce the class name of the wrapper <div>
with one of the options here.
<div class="REPLACE_ME">
<input id="2" type="checkbox" />
<label for="2"></label>
</div>
Example for .mt-android-pink
style
<div class="mt-android-pink">
<input id="3" type="checkbox" />
<label for="3"></label>
</div>
If you care about the size of CSS files. Instead of importing moretoggles.min.css
, you can import single style separately.
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/[email protected]/output/moretoggles.android.min.css">
</head>
You can change the size of the toggles by assigning 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="4" type="checkbox" />
<label for="4"></label>
</div>
Just like regular checkbox, you can add disabled
attribute to <input>
tag.
<div class="mt-ios">
<input id="5" type="checkbox" disabled/>
<label for="5"></label>
</div>
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="6" type="checkbox" />
<label for="6"></label>
</div>
<script>
const toggle = document.getElementById('6');
toggle.addEventListener('change', (event) => {
if (event.target.checked) {
alert('checked');
} else {
alert('not checked');
}
});
</script>
Nesting 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>
MoreToggles.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)
This project is still in very early stage. Your contribution is very welcome. Feel free to submit a pull request!
npm install
npm run start
This will start the webpack-dev-server and render the showcase page
/output
npm run build-doc
npm run build-css