Forms: Switches - Launchpad

Basic Switches

States

Default switch Checked switch Disabled switch Disabled checked

Sizes

Small Default Large

<div class="lp-grid lp-grid-cols-2 lp-gap-4 lp-grid-cols-sm-1">
    <div>
        <p class="lp-fw-semibold lp-mb-2">States</p>
        <div class="lp-d-flex lp-flex-col lp-gap-3">
            <label class="lp-switch">
                <input type="checkbox" />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Default switch</span>
            </label>
            <label class="lp-switch">
                <input type="checkbox" checked />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Checked switch</span>
            </label>
            <label class="lp-switch">
                <input type="checkbox" disabled />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Disabled switch</span>
            </label>
            <label class="lp-switch">
                <input type="checkbox" checked disabled />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Disabled checked</span>
            </label>
        </div>
    </div>
    <div>
        <p class="lp-fw-semibold lp-mb-2">Sizes</p>
        <div class="lp-d-flex lp-flex-col lp-gap-3">
            <label class="lp-switch lp-switch-sm">
                <input type="checkbox" checked />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Small</span>
            </label>
            <label class="lp-switch">
                <input type="checkbox" checked />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Default</span>
            </label>
            <label class="lp-switch lp-switch-lg">
                <input type="checkbox" checked />
                <span class="lp-switch-track"></span>
                <span class="lp-switch-label">Large</span>
            </label>
        </div>
    </div>
</div>

Color Variants

Primary Secondary Success Danger Warning Info

Contextual Label Colors

Success contextual Danger contextual

<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-mb-4">
    <label class="lp-switch lp-switch-primary">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Primary</span>
    </label>
    <label class="lp-switch lp-switch-secondary">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Secondary</span>
    </label>
    <label class="lp-switch lp-switch-success">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Success</span>
    </label>
    <label class="lp-switch lp-switch-danger">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Danger</span>
    </label>
    <label class="lp-switch lp-switch-warning">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Warning</span>
    </label>
    <label class="lp-switch lp-switch-info">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Info</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Contextual Label Colors</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-switch lp-switch-success lp-switch-label-contextual">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Success contextual</span>
    </label>
    <label class="lp-switch lp-switch-danger lp-switch-label-contextual">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Danger contextual</span>
    </label>
</div>

Switch with Inner Icons

check close Icon switch check close Checked notifications_active notifications_off Notifications

<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center">
    <label class="lp-switch lp-switch-icon lp-switch-success">
        <input type="checkbox" />
        <span class="lp-switch-track">
            <span class="lp-switch-on"><span class="material-symbols-outlined">check</span></span>
            <span class="lp-switch-off"><span class="material-symbols-outlined">close</span></span>
        </span>
        <span class="lp-switch-label">Icon switch</span>
    </label>
    <label class="lp-switch lp-switch-icon lp-switch-success">
        <input type="checkbox" checked />
        <span class="lp-switch-track">
            <span class="lp-switch-on"><span class="material-symbols-outlined">check</span></span>
            <span class="lp-switch-off"><span class="material-symbols-outlined">close</span></span>
        </span>
        <span class="lp-switch-label">Checked</span>
    </label>
    <label class="lp-switch lp-switch-icon lp-switch-danger">
        <input type="checkbox" checked />
        <span class="lp-switch-track">
            <span class="lp-switch-on"><span class="material-symbols-outlined">notifications_active</span></span>
            <span class="lp-switch-off"><span class="material-symbols-outlined">notifications_off</span></span>
        </span>
        <span class="lp-switch-label">Notifications</span>
    </label>
</div>

Switch with Inner Text

ON OFF Text switch ON OFF Checked YES NO Yes/No

Switch with Icon + Text

checkON OFFclose Icon + Text checkON OFFclose Checked

<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center lp-mb-4">
    <label class="lp-switch lp-switch-text lp-switch-success">
        <input type="checkbox" />
        <span class="lp-switch-track">
            <span class="lp-switch-on">ON</span>
            <span class="lp-switch-off">OFF</span>
        </span>
        <span class="lp-switch-label">Text switch</span>
    </label>
    <label class="lp-switch lp-switch-text lp-switch-success">
        <input type="checkbox" checked />
        <span class="lp-switch-track">
            <span class="lp-switch-on">ON</span>
            <span class="lp-switch-off">OFF</span>
        </span>
        <span class="lp-switch-label">Checked</span>
    </label>
    <label class="lp-switch lp-switch-text lp-switch-primary">
        <input type="checkbox" checked />
        <span class="lp-switch-track">
            <span class="lp-switch-on">YES</span>
            <span class="lp-switch-off">NO</span>
        </span>
        <span class="lp-switch-label">Yes/No</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Switch with Icon + Text</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center">
    <label class="lp-switch lp-switch-icon-text lp-switch-success">
        <input type="checkbox" />
        <span class="lp-switch-track">
            <span class="lp-switch-on"><span class="material-symbols-outlined">check</span>ON</span>
            <span class="lp-switch-off">OFF<span class="material-symbols-outlined">close</span></span>
        </span>
        <span class="lp-switch-label">Icon + Text</span>
    </label>
    <label class="lp-switch lp-switch-icon-text lp-switch-success">
        <input type="checkbox" checked />
        <span class="lp-switch-track">
            <span class="lp-switch-on"><span class="material-symbols-outlined">check</span>ON</span>
            <span class="lp-switch-off">OFF<span class="material-symbols-outlined">close</span></span>
        </span>
        <span class="lp-switch-label">Checked</span>
    </label>
</div>

iOS-Style Switches

Clean, rounded iOS-inspired switch with a slightly larger thumb and iOS-native system colors.

Default iOS switch

Off On

iOS color variants

Primary Success Danger Warning Info

iOS sizes

Small Default Large

<p class="lp-text-sm lp-text-muted lp-mb-3">Clean, rounded iOS-inspired switch with a slightly larger thumb and iOS-native system colors.</p>

<p class="lp-fw-semibold lp-mb-2">Default iOS switch</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center lp-mb-4">
    <label class="lp-switch lp-switch-ios">
        <input type="checkbox" /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Off</span>
    </label>
    <label class="lp-switch lp-switch-ios">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">On</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">iOS color variants</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center lp-mb-4">
    <label class="lp-switch lp-switch-ios lp-switch-ios-primary">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Primary</span>
    </label>
    <label class="lp-switch lp-switch-ios lp-switch-ios-success">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Success</span>
    </label>
    <label class="lp-switch lp-switch-ios lp-switch-ios-danger">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Danger</span>
    </label>
    <label class="lp-switch lp-switch-ios lp-switch-ios-warning">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Warning</span>
    </label>
    <label class="lp-switch lp-switch-ios lp-switch-ios-info">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Info</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">iOS sizes</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center">
    <label class="lp-switch lp-switch-ios lp-switch-ios-sm">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Small</span>
    </label>
    <label class="lp-switch lp-switch-ios">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Default</span>
    </label>
    <label class="lp-switch lp-switch-ios lp-switch-ios-lg">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Large</span>
    </label>
</div>

Android / Material Design 2

Material Design 2 — thin track with an elevated thumb that hangs above it.

Off On

<p class="lp-text-sm lp-text-muted lp-mb-3">Material Design 2 — thin track with an elevated thumb that hangs above it.</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center">
    <label class="lp-switch lp-switch-android">
        <input type="checkbox" /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Off</span>
    </label>
    <label class="lp-switch lp-switch-android">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">On</span>
    </label>
</div>

Material 3

Material Design 3 — outlined track, larger thumb that grows on checked state.

Off On

<p class="lp-text-sm lp-text-muted lp-mb-3">Material Design 3 — outlined track, larger thumb that grows on checked state.</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center">
    <label class="lp-switch lp-switch-m3">
        <input type="checkbox" /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Off</span>
    </label>
    <label class="lp-switch lp-switch-m3">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">On</span>
    </label>
</div>

Ant Design

Ant Design — slightly taller track, clean shadow.

Off On

<p class="lp-text-sm lp-text-muted lp-mb-3">Ant Design — slightly taller track, clean shadow.</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-items-center">
    <label class="lp-switch lp-switch-antd">
        <input type="checkbox" /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Off</span>
    </label>
    <label class="lp-switch lp-switch-antd">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">On</span>
    </label>
</div>

Label Placement

Position the label end (default), start, top, or bottom relative to the switch.

Label End (default) Label Start Label Top Label Bottom

<p class="lp-text-sm lp-text-muted lp-mb-3">Position the label end (default), start, top, or bottom relative to the switch.</p>
<div class="lp-d-flex lp-gap-5 lp-flex-wrap lp-items-start">
    <label class="lp-switch">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Label End (default)</span>
    </label>
    <label class="lp-switch lp-switch-label-start">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Label Start</span>
    </label>
    <label class="lp-switch lp-switch-label-top">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Label Top</span>
    </label>
    <label class="lp-switch lp-switch-label-bottom">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Label Bottom</span>
    </label>
</div>

Soft Switches

Soft variant with a muted track background and the variant color applied only to the thumb.

Soft Primary Soft Success Soft Danger Soft Warning Soft Info

<p class="lp-text-sm lp-text-muted lp-mb-3">Soft variant with a muted track background and the variant color applied only to the thumb.</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-switch lp-switch-soft-primary">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Soft Primary</span>
    </label>
    <label class="lp-switch lp-switch-soft-success">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Soft Success</span>
    </label>
    <label class="lp-switch lp-switch-soft-danger">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Soft Danger</span>
    </label>
    <label class="lp-switch lp-switch-soft-warning">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Soft Warning</span>
    </label>
    <label class="lp-switch lp-switch-soft-info">
        <input type="checkbox" checked /> <span class="lp-switch-track"></span>
        <span class="lp-switch-label">Soft Info</span>
    </label>
</div>

CSS reference

Class	Purpose
`.lp-switch`	Wrapper label containing a hidden `<input type="checkbox">` + track + label
`.lp-switch-track`	The visible pill-shaped track; contains the thumb (via `::before`) and optional on/off content
`.lp-switch-label`	Label text (required for contextual label variant)
`.lp-switch-on / .lp-switch-off`	Inner content shown on the checked / unchecked side of the track
`.lp-switch-sm / -lg`	Size variants
`.lp-switch-{primary\|secondary\|success\|danger\|warning\|info}`	Filled color variants
`.lp-switch-soft-{color}`	Soft variant — muted track, colored thumb
`.lp-switch-label-contextual`	Tints label text to match color variant when checked
`.lp-switch-icon / -text / -icon-text`	Wider track with inner icon, text, or both
`.lp-switch-label-{start\|top\|bottom}`	Label placement variants
`.lp-switch-ios` (+ `-sm/-lg/-primary/-success/…`)	iOS-style switch with system colors
`.lp-switch-android`	Material Design 2 style — thin track with elevated thumb
`.lp-switch-m3`	Material Design 3 style — outlined track, growing thumb
`.lp-switch-antd`	Ant Design style