Switches

Showcasing MICL switches

Switches with icons

First Choice

Second Choice

Third Choice (disabled)

Fourth Choice (disabled)

Switches without icons

First Choice

Second Choice

Third Choice (disabled)

Fourth Choice (disabled)

Switches with selected icon

First Choice

Second Choice

Third Choice (disabled)

Fourth Choice (disabled)

Switches with unselected icon

First Choice This is the first choice

Second Choice This is the second choice

Third Choice This is the third choice

Fourth Choice This is the fourth choice

Code example


<div class="micl-flex--vcenter" style="column-gap:16px">
  <input type="checkbox" class="micl-switch" id="id0" checked value="v0" role="switch">
  <label for="id0" class="md-sys-typescale-body-medium">First Choice</label>
</div>