Toggle variations

We use Toggles to help users easily switch between two states.

Subheading label
Subheading label
Subheading label
<div class="inm-toggle ">
  <div class="inm-subheading inm-mid-blue-text">Subheading label</div>
  <label class="inm-toggle__label">
    <div class="inm-toggle__off-tag">Off</div>
    <input type="checkbox" name="" id="toggle1" value="value1" class="inm-toggle__input" />
    <div class="inm-toggle__slider"></div>
    <div class="inm-toggle__on-tag">On</div>
  </label>
</div>
<div class="inm-toggle ">
  <div class="inm-subheading inm-mid-blue-text">Subheading label</div>
  <label class="inm-toggle__label">
    <div class="inm-toggle__off-tag">Off</div>
    <input type="checkbox" name="" id="toggle2" value="value2" class="inm-toggle__input" checked="" />
    <div class="inm-toggle__slider"></div>
    <div class="inm-toggle__on-tag">On</div>
  </label>
</div>
<div class="inm-toggle inm-toggle--disabled">
  <div class="inm-subheading inm-mid-blue-text">Subheading label</div>
  <label class="inm-toggle__label">
    <div class="inm-toggle__off-tag">Off</div>
    <input type="checkbox" name="" id="toggle2" value="value2" class="inm-toggle__input" disabled="" />
    <div class="inm-toggle__slider"></div>
    <div class="inm-toggle__on-tag">On</div>
  </label>
</div>
Style and spacing
Spacing
4px radius