Toggle All Switch

By Rafi

interaction dashboard callout toggle switch flexbox

How do I use This?

A toggle all option for a group of switches. Works great in a dashboard or off-canvas control panel.

HTML

<div class="callout" id="switch-toggle-all">

  <div class="switch-toggle-wrapper">
    <div class="switch">
      <input class="switch-input" id="exampleSwitch1" type="checkbox" name="exampleSwitch" data-toggle-all>
      <label class="switch-paddle" for="exampleSwitch1">
        <span class="show-for-sr">Toggle All</span>
      </label>
    </div>
    <span>Toggle All</span>
  </div>

  <hr />

  <div class="switch-toggle-wrapper">
    <div class="switch">
      <input class="switch-input" id="exampleSwitch2" type="checkbox" name="exampleSwitch2">
      <label class="switch-paddle" for="exampleSwitch2">
        <span class="show-for-sr">Automatic Updates</span>
      </label>
    </div>
    <span>Automatic Updates</span>
  </div>

  <div class="switch-toggle-wrapper">
    <div class="switch">
      <input class="switch-input" id="exampleSwitch3" type="checkbox" name="exampleSwitch3">
      <label class="switch-paddle" for="exampleSwitch3">
        <span class="show-for-sr">Sync Daily</span>
      </label>
    </div>
    <span>Sync Daily</span>
  </div>

  <div class="switch-toggle-wrapper">
    <div class="switch">
      <input class="switch-input" id="exampleSwitch4" type="checkbox" name="exampleSwitch4">
      <label class="switch-paddle" for="exampleSwitch4">
        <span class="show-for-sr">Location</span>
      </label>
    </div>
    <span>Location</span>
  </div>

  <div class="switch-toggle-wrapper">
    <div class="switch">
      <input class="switch-input" id="exampleSwitch5" type="checkbox" name="exampleSwitch5">
      <label class="switch-paddle" for="exampleSwitch5">
        <span class="show-for-sr">push notifications</span>
      </label>
    </div>
    <span>Push Notifications</span>
  </div>

</div>

.switch-toggle-wrapper {
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-between;
  align-items: center;

  .switch {
    margin-bottom: 0;
  }
}

.switch-toggle-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.switch-toggle-wrapper .switch {
  margin-bottom: 0;
}

$('#switch-toggle-all [data-toggle-all]' ).click(function () {
  $( '#switch-toggle-all input[type="checkbox"]').prop('checked', this.checked)
})

Toggle All Switch

By Rafi

Hover Add to Cart Button

Hover Like Button

Mobile App Toggle

Toggle All Switch

By Rafi

Similar Building Blocks

Hover Add to Cart Button

Hover Like Button

Mobile App Toggle