Forms: Checkbox / Radio

Checkboxes — States

Default checkbox Checked checkbox Indeterminate checkbox Disabled checkbox Disabled checked

<div class="lp-d-flex lp-flex-column lp-gap-3">
    <label class="lp-checkbox">
        <input type="checkbox" />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Default checkbox</span>
    </label>
    <label class="lp-checkbox">
        <input type="checkbox" checked />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Checked checkbox</span>
    </label>
    <label class="lp-checkbox">
        <input type="checkbox" id="cb-indeterminate" />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Indeterminate checkbox</span>
    </label>
    <label class="lp-checkbox">
        <input type="checkbox" disabled />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Disabled checkbox</span>
    </label>
    <label class="lp-checkbox">
        <input type="checkbox" checked disabled />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Disabled checked</span>
    </label>
</div>
<script>document.getElementById("cb-indeterminate").indeterminate = true;</script>

Checkbox Sizes

Small Default Large

<div class="lp-d-flex lp-gap-5 lp-items-center lp-flex-wrap">
    <label class="lp-checkbox lp-checkbox-sm">
        <input type="checkbox" checked />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Small</span>
    </label>
    <label class="lp-checkbox">
        <input type="checkbox" checked />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Default</span>
    </label>
    <label class="lp-checkbox lp-checkbox-lg">
        <input type="checkbox" checked />
        <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Large</span>
    </label>
</div>

Checkbox Colors

Color variants

Primary Secondary Success Danger Warning Info

With contextual labels — label color matches when checked

Primary Success Danger

<p class="lp-fw-semibold lp-mb-2">Color variants</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-mb-4">
    <label class="lp-checkbox lp-checkbox-primary">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Primary</span>
    </label>
    <label class="lp-checkbox lp-checkbox-secondary">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Secondary</span>
    </label>
    <label class="lp-checkbox lp-checkbox-success">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Success</span>
    </label>
    <label class="lp-checkbox lp-checkbox-danger">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Danger</span>
    </label>
    <label class="lp-checkbox lp-checkbox-warning">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Warning</span>
    </label>
    <label class="lp-checkbox lp-checkbox-info">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Info</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">With contextual labels — label color matches when checked</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-checkbox lp-checkbox-primary lp-checkbox-label-contextual">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Primary</span>
    </label>
    <label class="lp-checkbox lp-checkbox-success lp-checkbox-label-contextual">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Success</span>
    </label>
    <label class="lp-checkbox lp-checkbox-danger lp-checkbox-label-contextual">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Danger</span>
    </label>
</div>

Radio Buttons — States

<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">Vertical Group (Default)</p>
        <div class="lp-d-flex lp-flex-column lp-gap-3">
            <label class="lp-radio">
                <input type="radio" name="rd-1" />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Option 1</span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-1" checked />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Option 2 (Selected)</span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-1" />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Option 3</span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-1" disabled />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Disabled option</span>
            </label>
        </div>
    </div>
    <div>
        <p class="lp-fw-semibold lp-mb-2">Inline Layout</p>
        <div class="lp-d-flex lp-gap-4 lp-flex-wrap">
            <label class="lp-radio">
                <input type="radio" name="rd-2" checked />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Option A</span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-2" />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Option B</span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-2" />
                <span class="lp-radio-circle"></span>
                <span class="lp-radio-label">Option C</span>
            </label>
        </div>

        <p class="lp-fw-semibold lp-mt-4 lp-mb-2">Without Label</p>
        <div class="lp-d-flex lp-gap-3">
            <label class="lp-radio">
                <input type="radio" name="rd-3" />
                <span class="lp-radio-circle"></span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-3" checked />
                <span class="lp-radio-circle"></span>
            </label>
            <label class="lp-radio">
                <input type="radio" name="rd-3" />
                <span class="lp-radio-circle"></span>
            </label>
        </div>
    </div>
</div>

Radio Sizes

Small Default Large

<div class="lp-d-flex lp-gap-5 lp-items-center lp-flex-wrap">
    <label class="lp-radio lp-radio-sm">
        <input type="radio" name="rd-sz" checked />
        <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Small</span>
    </label>
    <label class="lp-radio">
        <input type="radio" name="rd-sz" />
        <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Default</span>
    </label>
    <label class="lp-radio lp-radio-lg">
        <input type="radio" name="rd-sz" />
        <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Large</span>
    </label>
</div>

Radio Colors

Color variants

Primary Secondary Success Danger Warning Info

With contextual labels

Success Danger Info

<p class="lp-fw-semibold lp-mb-2">Color variants</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-mb-4">
    <label class="lp-radio lp-radio-primary">
        <input type="radio" name="rd-c" checked /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Primary</span>
    </label>
    <label class="lp-radio lp-radio-secondary">
        <input type="radio" name="rd-c" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Secondary</span>
    </label>
    <label class="lp-radio lp-radio-success">
        <input type="radio" name="rd-c" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Success</span>
    </label>
    <label class="lp-radio lp-radio-danger">
        <input type="radio" name="rd-c" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Danger</span>
    </label>
    <label class="lp-radio lp-radio-warning">
        <input type="radio" name="rd-c" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Warning</span>
    </label>
    <label class="lp-radio lp-radio-info">
        <input type="radio" name="rd-c" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Info</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">With contextual labels</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-radio lp-radio-success lp-radio-label-contextual">
        <input type="radio" name="rd-cl" checked /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Success</span>
    </label>
    <label class="lp-radio lp-radio-danger lp-radio-label-contextual">
        <input type="radio" name="rd-cl" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Danger</span>
    </label>
    <label class="lp-radio lp-radio-info lp-radio-label-contextual">
        <input type="radio" name="rd-cl" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Info</span>
    </label>
</div>

Soft / Muted Variants

Soft variants have a subtle tinted background and colored icon when checked — inspired by Material UI.

Soft Checkboxes

Soft Primary Soft Success Soft Danger Soft Warning Soft Info

Soft Radios

Soft Primary Soft Success Soft Danger

<p class="lp-text-sm lp-text-muted lp-mb-3">Soft variants have a subtle tinted background and colored icon when checked — inspired by Material UI.</p>

<p class="lp-fw-semibold lp-mb-2">Soft Checkboxes</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-mb-4">
    <label class="lp-checkbox lp-checkbox-soft-primary">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Soft Primary</span>
    </label>
    <label class="lp-checkbox lp-checkbox-soft-success">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Soft Success</span>
    </label>
    <label class="lp-checkbox lp-checkbox-soft-danger">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Soft Danger</span>
    </label>
    <label class="lp-checkbox lp-checkbox-soft-warning">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Soft Warning</span>
    </label>
    <label class="lp-checkbox lp-checkbox-soft-info">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Soft Info</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Soft Radios</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-radio lp-radio-soft-primary">
        <input type="radio" name="rd-soft" checked /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Soft Primary</span>
    </label>
    <label class="lp-radio lp-radio-soft-success">
        <input type="radio" name="rd-soft" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Soft Success</span>
    </label>
    <label class="lp-radio lp-radio-soft-danger">
        <input type="radio" name="rd-soft" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Soft Danger</span>
    </label>
</div>

Outlined Variants

Outlined variants show only border and icon colors — no filled background when checked.

Outlined Checkboxes

Outlined Primary Outlined Success Outlined Danger

Outlined Radios

Outlined Primary Outlined Success Outlined Danger

<p class="lp-text-sm lp-text-muted lp-mb-3">Outlined variants show only border and icon colors — no filled background when checked.</p>

<p class="lp-fw-semibold lp-mb-2">Outlined Checkboxes</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-mb-4">
    <label class="lp-checkbox lp-checkbox-outlined-primary">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Outlined Primary</span>
    </label>
    <label class="lp-checkbox lp-checkbox-outlined-success">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Outlined Success</span>
    </label>
    <label class="lp-checkbox lp-checkbox-outlined-danger">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Outlined Danger</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Outlined Radios</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-radio lp-radio-outlined-primary">
        <input type="radio" name="rd-out" checked /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Outlined Primary</span>
    </label>
    <label class="lp-radio lp-radio-outlined-success">
        <input type="radio" name="rd-out" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Outlined Success</span>
    </label>
    <label class="lp-radio lp-radio-outlined-danger">
        <input type="radio" name="rd-out" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Outlined Danger</span>
    </label>
</div>

Label Placement

Control where the label sits relative to the control — end (default), start, top, or bottom.

Checkbox label positions

Label End (Default) Label Start Label Top Label Bottom

Radio label positions

Label End Label Start Label Top Label Bottom

<p class="lp-text-sm lp-text-muted lp-mb-3">Control where the label sits relative to the control — end (default), start, top, or bottom.</p>

<p class="lp-fw-semibold lp-mb-2">Checkbox label positions</p>
<div class="lp-d-flex lp-gap-5 lp-flex-wrap lp-items-start lp-mb-4">
    <label class="lp-checkbox lp-checkbox-label-end">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Label End (Default)</span>
    </label>
    <label class="lp-checkbox lp-checkbox-label-start">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Label Start</span>
    </label>
    <label class="lp-checkbox lp-checkbox-label-top">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Label Top</span>
    </label>
    <label class="lp-checkbox lp-checkbox-label-bottom">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Label Bottom</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Radio label positions</p>
<div class="lp-d-flex lp-gap-5 lp-flex-wrap lp-items-start">
    <label class="lp-radio lp-radio-label-end">
        <input type="radio" name="rd-lp" checked /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Label End</span>
    </label>
    <label class="lp-radio lp-radio-label-start">
        <input type="radio" name="rd-lp" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Label Start</span>
    </label>
    <label class="lp-radio lp-radio-label-top">
        <input type="radio" name="rd-lp" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Label Top</span>
    </label>
    <label class="lp-radio lp-radio-label-bottom">
        <input type="radio" name="rd-lp" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Label Bottom</span>
    </label>
</div>

Card Style Checkbox & Radio

Selectable card-style controls for rich selection interfaces like plan pickers.

Card Checkboxes

Standard Plan

Best for individuals and small teams

Professional Plan

For growing businesses

Enterprise Plan

For large organizations

Card Radios

Free

$0/month — Basic features

Pro

$19/month — Advanced features

Team

$49/month — Team collaboration

<p class="lp-text-sm lp-text-muted lp-mb-3">Selectable card-style controls for rich selection interfaces like plan pickers.</p>

<p class="lp-fw-semibold lp-mb-2">Card Checkboxes</p>
<div class="lp-grid lp-grid-cols-3 lp-grid-cols-md-2 lp-grid-cols-sm-1 lp-gap-3 lp-mb-4">
    <label class="lp-checkbox lp-checkbox-card">
        <input type="checkbox" checked />
        <span class="lp-checkbox-box"></span>
        <div class="lp-checkbox-card-content">
            <div class="lp-checkbox-card-title">Standard Plan</div>
            <div class="lp-checkbox-card-description">Best for individuals and small teams</div>
        </div>
    </label>
    <label class="lp-checkbox lp-checkbox-card lp-checkbox-card-success">
        <input type="checkbox" />
        <span class="lp-checkbox-box"></span>
        <div class="lp-checkbox-card-content">
            <div class="lp-checkbox-card-title">Professional Plan</div>
            <div class="lp-checkbox-card-description">For growing businesses</div>
        </div>
    </label>
    <label class="lp-checkbox lp-checkbox-card lp-checkbox-card-primary">
        <input type="checkbox" />
        <span class="lp-checkbox-box"></span>
        <div class="lp-checkbox-card-content">
            <div class="lp-checkbox-card-title">Enterprise Plan</div>
            <div class="lp-checkbox-card-description">For large organizations</div>
        </div>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Card Radios</p>
<div class="lp-grid lp-grid-cols-3 lp-grid-cols-md-2 lp-grid-cols-sm-1 lp-gap-3">
    <label class="lp-radio lp-radio-card">
        <input type="radio" name="card-rd" checked />
        <span class="lp-radio-circle"></span>
        <div class="lp-radio-card-content">
            <div class="lp-radio-card-title">Free</div>
            <div class="lp-radio-card-description">$0/month — Basic features</div>
        </div>
    </label>
    <label class="lp-radio lp-radio-card lp-radio-card-success">
        <input type="radio" name="card-rd" />
        <span class="lp-radio-circle"></span>
        <div class="lp-radio-card-content">
            <div class="lp-radio-card-title">Pro</div>
            <div class="lp-radio-card-description">$19/month — Advanced features</div>
        </div>
    </label>
    <label class="lp-radio lp-radio-card lp-radio-card-primary">
        <input type="radio" name="card-rd" />
        <span class="lp-radio-circle"></span>
        <div class="lp-radio-card-content">
            <div class="lp-radio-card-title">Team</div>
            <div class="lp-radio-card-description">$49/month — Team collaboration</div>
        </div>
    </label>
</div>

Ripple Effect

Add a MUI-style ripple halo on hover via the lp-checkbox-ripple / lp-radio-ripple modifier.

Checkbox with ripple

Hover for ripple Success ripple

Radio with ripple

Option 1 Option 2

<p class="lp-text-sm lp-text-muted lp-mb-3">Add a MUI-style ripple halo on hover via the <code>lp-checkbox-ripple</code> / <code>lp-radio-ripple</code> modifier.</p>

<p class="lp-fw-semibold lp-mb-2">Checkbox with ripple</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap lp-mb-4">
    <label class="lp-checkbox lp-checkbox-ripple lp-checkbox-primary">
        <input type="checkbox" /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Hover for ripple</span>
    </label>
    <label class="lp-checkbox lp-checkbox-ripple lp-checkbox-success">
        <input type="checkbox" checked /> <span class="lp-checkbox-box"></span>
        <span class="lp-checkbox-label">Success ripple</span>
    </label>
</div>

<p class="lp-fw-semibold lp-mb-2">Radio with ripple</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <label class="lp-radio lp-radio-ripple lp-radio-primary">
        <input type="radio" name="rd-rp" checked /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Option 1</span>
    </label>
    <label class="lp-radio lp-radio-ripple lp-radio-primary">
        <input type="radio" name="rd-rp" /> <span class="lp-radio-circle"></span>
        <span class="lp-radio-label">Option 2</span>
    </label>
</div>

CSS reference

Class	Purpose
`.lp-checkbox / .lp-radio`	Base wrapper label
`.lp-checkbox-box / .lp-radio-circle`	Visual control (sibling to the hidden input)
`.lp-checkbox-label / .lp-radio-label`	Label text (required for contextual-label variant)
`.lp-checkbox-sm / -lg, .lp-radio-sm / -lg`	Size variants
`.lp-checkbox-{primary\|secondary\|success\|danger\|warning\|info}`	Filled color variants (same for radio)
`.lp-checkbox-soft-{color}`	Soft / muted variant (tinted bg + colored icon)
`.lp-checkbox-outlined-{color}`	Outlined variant (transparent bg, colored border + icon)
`.lp-checkbox-label-contextual`	Label color matches the variant when checked
`.lp-checkbox-label-{start\|end\|top\|bottom}`	Label placement relative to the control
`.lp-checkbox-card / .lp-radio-card`	Card-style clickable wrapper with title + description
`.lp-checkbox-card-{color} / .lp-radio-card-{color}`	Card color variants (applied when checked)
`.lp-checkbox-ripple / .lp-radio-ripple`	MUI-style pulse halo on hover