Toggle button

Off

<div class="btn-group">
  <div class="btn-group__toggle">
    <input type="checkbox" id="a" name="toggle-a" class="" value="no">
    
    <label for="a" class="" data-on-text="on" data-off-text="off"></label>
  </div>
  <div class="btn-group__toggle-label">
      <label for="a" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</label>  </div>
</div>

On

<div class="btn-group">
  <div class="btn-group__toggle">
    <input type="checkbox" id="b" name="toggle-b" class="" value="no" checked>
    
    <label for="b" class="" data-on-text="on" data-off-text="off"></label>
  </div>
  <div class="btn-group__toggle-label">
      <label for="b" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</label>  </div>
</div>

Introduction

Used to display checkbox input types as a toggle button. When used in a form, as part of a form submission, remember that a input[type=checkbox] will only submit a value if it is checked. Therefore, on the server you'll only have to check for the presence of a value, and not the value itself.

Usage

Class name Effect Remarks
.btn-group__toggle Placed on the outer tag that will contain the checkbox. It styles the checkbox's label to look like a toggle. Required.
.btn-group__toggle-label Placed on the outer tag that will contain the text that will appear beside the checkbox. Required.
[data-on-text=TEXT] Placed on the label. This text is shown when the checkbox is not marked as checked. Required.
[data-off-text=TEXT] Placed on the label. This text is shown when the checkbox is marked as checked. Required.