Basic design
A switch has the markup of a custom checkbox, but uses the .switch class to render a toggle switch. Switches also support the disabled attribute.
<div class="switch">
<input id="option" type="checkbox" name="option">
<label for="option" class="togglemark">
Checkbox 1
</label>
</div>
Options
Switch size
By adding .switch-lg class to the switch wrapper .switch, it will transform the switch into a bigger version.
<label class="switch switch-lg" for="option">
<input id="option" type="checkbox" name="option">
<span class="togglemark">Checkbox</span>
</label>
Switch with label
The label for the switch is limited to the ON/OFF option, to enabled it You need to add the.switch-label class to the switch wrapper .switch.
<label class="switch switch-label" for="option">
<input id="option" type="checkbox" name="option">
<span class="togglemark">Checkbox</span>
</label>
Label position
You have also the option to align the checkbox/switcher to the right and to have the label on the left. For this simply add .switch-rtl class like in the examples below.
<div class="switch switch-rtl">
<input id="option" type="checkbox" name="option">
<label for="option" class="togglemark">
Checkbox 1
</label>
</div>
Light/Dark mode switch
The Mode switch/toggle is used to switch between Standard (light) mode and Dark mode.
<label class="switch switch-label light-dark-toggle" for="option">
<b class="light">Light mode</b>
<input id="option" type="checkbox" name="option">
<span class="togglemark">
<b class="details"></b>
</span>
<b class="dark">Dark mode</b>
</label>