mercuryuiWeb

Checkbox

Simple toggle

<div class="form-control">
    <div class="toggle">
        <div class="body border-red-700 bg-red-200">
            <input type="checkbox" class="toggle-checkbox">
            <div class="dot bg-red-500"></div>
        </div>
        <label class="label">
            Lorem ipsum
        </label>
    </div>
</div>

Lorem ipsum

Class name

@apply

.toggle

@apply flex items-center gap-2 p-1 w-full

.toggle > .body

@apply block relative border-2 w-14 h-8 rounded-full

.dot

@apply absolute top-0.5 left-1 square-6 rounded-full transition duration-150 ease-out

.toggle > .label

@apply tracking-wider font-bold text-lg

input[type = "checkbox"]

@apply absolute opacity-0 z-10 w-14 h-8 cursor-pointer

Structure

.toggle

label

.body

input

svg

The order between <label> and body doesn't matter, but the order between <input> and .dot <div> does.