Switch

<input type="checkbox" name="switch_1" id="switch_1" class="bg-bg-muted text-primary switch switch-sm switch-knob-white" />
<input type="checkbox" name="switch_def2" id="switch_def2" class="bg-bg-muted text-fg-title switch switch-sm switch-knob-dark" />
<input type="checkbox" name="switch_def3" id="switch_def3" class="bg-bg-muted text-bg-muted switch switch-sm switch-knob-white" />

<label for="switch" class="flex items-center gap-x1">
    <input type="checkbox" name="switch" id="switch" class="bg-bg-muted text-primary switch switch-sm switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">Use
        Dark Theme</span>
</label>
<label for="switch_lab1" class="flex items-center gap-x1">
    <input type="checkbox" checked name="switch_lab1" id="switch_lab1" class="bg-bg-muted text-primary switch switch-sm switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">Checked</span>
</label>
<label for="switch_lab_2" class="flex items-center gap-x1">
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 me-3">No</span>
    <input type="checkbox" name="switch_lab_2" id="switch_lab_2" class="bg-bg-muted text-primary switch switch-sm switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">Yes</span>
</label>

<label for="switch_xl" class="flex items-center gap-x1">
    <input type="checkbox" checked name="switch_xl" id="switch_xl" class="bg-bg-muted text-primary switch switch-xs switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">Xs</span>
</label>
<label for="switch_sm" class="flex items-center gap-x1">
    <input type="checkbox" name="switch_sm" id="switch_sm" class="bg-bg-muted text-primary switch switch-sm switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">SM</span>
</label>
<label for="switch_normal" class="flex items-center gap-x1">
    <input type="checkbox" name="switch_normal" id="switch_normal" class="bg-bg-muted text-primary switch switch-md switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">MD</span>
</label>
<label for="switch_lg" class="flex items-center gap-x1">
    <input type="checkbox" checked name="switch_lg" id="switch_lg" class="bg-bg-muted text-primary switch switch-lg switch-knob-white" />
    <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:op50 ms-3">LG</span>
</label>

<input type="checkbox" name="switch_outline1" id="switch_outline1" class="bg-bg-muted/40 text-primary switch-outline b-border-strong/70 checked-b-primary switch-outline-sm switch-knob-white" />
<input type="checkbox" name="switch_outline2" id="switch_outline2" class="bg-bg-muted/40 text-fg-title switch-outline b-border-strong/70 checked-b-fg-title switch-outline-sm switch-knob-dark" />