JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/sebastien-roch/iToggle/master/itoggle.jquery.js"></script>
<form action="#">
<label for="foo-toggle-long">No attribute label given, take default options:</label>
<input id="foo-toggle-long" name="foo-long" type="checkbox" class="iToggle" checked/>
<br />
<br />
<label for="foo-toggle">Regular yes/no:</label>
<input id="foo-toggle" name="foo" type="checkbox" class="iToggle" data-label-on="yes" data-label-off="no"/>
<br />
<br />
<label for="foo-toggle-long">With long label:</label>
<input id="foo-toggle-long" name="foo-long" type="checkbox" class="iToggle" data-label-on="I'm a quite long label" data-label-off="I'm short" checked/>
</form>
JavaScript
$(document).ready(function() {
// default options
$.fn.iToggle.defaultOptions = {
defaultOffLabel: 'not at all',
defaultOnLabel: 'maybe'
};
$('input[type=checkbox]').iToggle();
});