Switch

Switching selector for represent the switching between two states or on-off state.

Default Switch

Default example.

Switch 1

Switch 2

<form>
  <div class="ui-input-group">
    <div class="ui-switch">
      <input type="checkbox" id="switch-Xf1" />
      <label for="switch-Xf1">Switch 1</label>
    </div>
    <div class="ui-switch">
      <input type="checkbox" id="switch-Xf2" checked />
      <label for="switch-Xf2">Switch 2</label>
    </div>
  </div>
</form>

Empty switch

Empty label and horizontal style.

<form>
  <div class="ui-input-group isHorizontal">
    <div class="ui-switch">
      <input type="checkbox" id="switch-Qx1" />
      <!-- empty -->
      <label for="switch-Qx1"></label>
    </div>
    <div class="ui-switch">
      <input type="checkbox" id="switch-Qx2" />
      <!-- empty -->
      <label for="switch-Qx2"></label>
    </div>
  </div>
</form>

Disabled Status

Disabled switch.

Ways to switch radio disabled:

1. Add disabled="disabled" to the <input />;
2. Add class isDisabled to the <div class="ui-switch"> (optional).

Default

Default and checked

Disabled

Disabled and checked

<form>
  <div class="ui-input-group">
    <div class="ui-switch isDisabled">
      <input type="checkbox" id="switch-DA1" disabled="disabled" />
      <label for="switch-DA1">Disabled</label>
    </div>
    <div class="ui-switch isDisabled">
      <input type="checkbox" id="switch-DA2" disabled="disabled" checked />
      <label for="switch-DA2">Disabled and checked</label>
    </div>
  </div>
</form>