Switch

<div class="flex items-center flex-wrap gap-3">
    <x-ui.switch name="switch_1" id="switch_1"
        class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
    <x-ui.switch name="switch_def2" id="switch_def2"
        class="bg-bg-muted text-bg-muted [--knob-bg:var(--color-fg-title)]" />
    <x-ui.switch name="switch_def3" id="switch_def3"
        class="bg-bg-muted text-fg-title [--knob-bg:var(--color-bg)]" />
</div>

<div class="flex flex-col gap-3">
    <label for="switch" class="flex items-center gap-x-1">
        <x-ui.switch name="switch" id="switch"
            class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">Use
            Dark Theme</span>
    </label>
    <label for="switch_lab1" class="flex items-center gap-x-1">
        <x-ui.switch checked name="switch_lab1" id="switch_lab1"
            class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">Checked</span>
    </label>
    <label for="switch_lab_2" class="flex items-center gap-x-1">
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 me-3">No</span>
        <x-ui.switch name="switch_lab_2" id="switch_lab_2"
            class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">Yes</span>
    </label>
</div>

<div class="flex flex-col gap-3 w-full">
    <label for="switch_xs" class="flex items-center gap-x-1">
        <x-ui.switch size="xs" name="switch_xs" id="switch_xs" class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">Xs</span>
    </label>
    <label for="switch_sm" class="flex items-center gap-x-1">
        <x-ui.switch size="sm" name="switch_sm" id="switch_sm" class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">SM</span>
    </label>
    <label for="switch_normal" class="flex items-center gap-x-1">
        <x-ui.switch name="switch_normal" id="switch_normal" class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">MD</span>
    </label>
    <label for="switch_lg" class="flex items-center gap-x-1">
        <x-ui.switch size="lg" name="switch_lg" id="switch_lg" class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">LG</span>
    </label>
</div>

<div class="flex items-center flex-wrap gap-6">
    <x-ui.switch outlined name="switch_outline1" id="switch_outline1" class="bg-bg text-transparent [--knob-bg:var(--color-gray-500)]" />
    <x-ui.switch outlined name="switch_outline2" id="switch_outline2" class="bg-bg text-transparent [--knob-bg:var(--color-gray-500)]" />
</div>