TRAVLR UI Kit

<%= require('html-loader!./../components/sidebar-documentation.html') %>

Toggle Button

Toggles change the state of a single option. Toggles can be switched on or off by pressing.

Default Toggle Button

They can also be checked programmatically by setting the checked property.

On this toggle normally have 2 (two) captions, for example here is using Toggle Off caption as default, and then when toggle is checked caption will be change as Toggle On.
Just change caption as you need !

Source code


<form class="t-form">
  <div class="t-input-group">
    <input id="example" name="example" type="checkbox" class="t-input-toggle t-input-toggle-light">
    <label for="example" class="t-input-toggle-btn"></label>
    <span class="t-input-toggle-label">
      Toggle Off
    </span>
  </div>
</form>

<%= require('html-loader!./../components/footer-documentation.html') %>