# Switch
Switching selector for represent the switching between two states or on-off state.
# Default Switch
Default example.
<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:
- Use
disabled="disabled"
toinput
;
<form>
<div class="ui-input-group">
<div class="ui-switch">
<input type="checkbox" id="switch-DA1" disabled="disabled" checked />
<label for="switch-DA1">Disabled and checked</label>
</div>
<div class="ui-switch">
<input type="checkbox" id="switch-DA2" disabled="disabled" />
<label for="switch-DA2">Disabled by default</label>
</div>
</div>
</form>
← Select Input group →