UI Designs
Mockups
switch
<div class="field">
<input id="switchExample" type="checkbox" name="switchExample" class="switch" checked="checked">
<label for="switchExample">Switch example</label>
</div>
Use is-rtl to display a right-to-left design of checkbox (text at left)
<div class="field">
<input id="switchRtlExample" type="checkbox" name="switchRtlExample" class="switch is-rtl" checked="checked">
<label for="switchRtlExample">Switch example</label>
</div>
Don't forget to set the id attribute on input and the for attribute on label with the same value to get it work. This will link the label to the checkbox and then handle the click.
