Switches

Setup

Switches styles are included in Manifest CSS or a standalone stylesheet, both referencing theme variables.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.switch.css" />

Default

<input type="checkbox" role="switch" />

Utilities

Switches accept Manifest utility classes, which can be stacked in any combination.

Colors

<!-- Brand variant -->
<input type="checkbox" role="switch" class="brand" />

<!-- Accent variant -->
<input type="checkbox" role="switch" class="accent" />

<!-- Positive variant -->
<input type="checkbox" role="switch" class="positive" />

<!-- Negative variant -->
<input type="checkbox" role="switch" class="negative" />

Size

<!-- Small variant -->
<input type="checkbox" role="switch" class="sm" />

<!-- Large variant -->
<input type="checkbox" role="switch" class="lg" />

Appearance

<!-- Border variant -->
<input type="checkbox" role="switch" class="outlined" />

<!-- Combined with colors -->
<input type="checkbox" role="switch" class="outlined brand" />
<input type="checkbox" role="switch" class="outlined accent" />
<input type="checkbox" role="switch" class="outlined positive" />
<input type="checkbox" role="switch" class="outlined negative" />

Form Layouts

Labels

Placing the switch and text inside a <label> automatically arranges them in a row.

<label>
    <input type="checkbox" role="switch" />
    Enable notifications
</label>

Groups

Placing labelled switches inside a <fieldset> automatically arranges them in a column with a gap.

<fieldset>
    <label>
        <input type="checkbox" role="switch" />
        Option A
    </label>
    <label>
        <input type="checkbox" role="switch" />
        Option B
    </label>
</fieldset>

Styles

Theme

Default switches use the following theme variables:

Variable	Purpose
`--color-field-surface`	Switch background
`--color-field-surface-hover`	Switch background on hover
`--color-field-inverse`	Marker color
`--spacing-field-height`	Switch size
`--radius`	Border radius for switch corners
`--transition`	Transition for interactive states

Customization

Modify base switch styles with custom CSS for the input[role=switch] selector.

input[role=switch] {
    background-color: #f0f8ff;
    border: 2px solid #3b82f6;
    border-radius: 20px;

    /* Marker */
    &::before {
        background-color: #1e40af;
        box-shadow: 0 2px 4px rgba(30, 64, 175, 0.3);
    }

    /* Background when checked */
    &:checked {
        background-color: #3b82f6;
    }

    /* Marker when checked */
    &:checked::before {
        background-color: white;
        left: calc(100% - 1.5rem + 0.125rem);
    }
}