Switch

Load button.css to use toggle switches. A switch is a styled checkbox: wrap an <input type="checkbox"> inside a <label class="switch"> and add a <span class="switch-slider"> for the visual track and knob. No JavaScript required.

Without text

The minimal form uses only the slider span with .switch-no-text. Add .round to the slider span for a pill-shaped track.

Accessibility. The slider is a purely decorative CSS element — it carries no text. The underlying <input> must therefore have an explicit aria-label so screen readers can announce the control's purpose. The checkbox is keyboard-reachable (Tab) and toggled with Space, without any JavaScript.

<label class="switch">
    <input type="checkbox" aria-label="Toggle">
    <span class="switch-slider switch-no-text"></span>
</label>

<!-- Rounded -->
<label class="switch">
    <input type="checkbox" aria-label="Toggle">
    <span class="switch-slider switch-no-text round"></span>
</label>

Variables

Size and colors are controlled by the following variables:

Variable	Role	Default
`--switch-width`	Total width of the track	`calc(var(--font-size) * 5)`
`--switch-height`	Total height of the track	`calc(var(--font-size) * 2.8)`
`--switch-bg-color`	Track background when ON	`var(--inputs-bg-color)`
`--switch-fg-color`	Track background when OFF	`var(--bg-color-alt)`
`--switch-slider-off-color`	Knob color when OFF	`var(--fg-color-alt)`
`--switch-slider-on-color`	Knob color when ON	`var(--fg-color)`
`--switch-slider-unselected-opacity`	Visibility of the inactive text label	`0`

With text labels

Place a .switch-off-text and a .switch-on-text span inside the slider to label each state. The visible text does not replace the accessible name: keep aria-label on the <input> to describe what the switch controls, not just its current state.

OFF ON OU ET - +

<label class="switch">
    <input type="checkbox" aria-label="Toggle ON/OFF">
    <span class="switch-slider">
        <span class="switch-off-text">OFF</span>
        <span class="switch-on-text">ON</span>
    </span>
</label>

Custom size

Override --switch-width and --switch-height inline to resize a specific switch without affecting others. The knob and text labels scale automatically with the track.

<label class="switch"
       style="--switch-width: calc(var(--font-size) * 3);
              --switch-height: calc(var(--font-size) * 1.6)">
    <input type="checkbox" aria-label="Small toggle">
    <span class="switch-slider switch-no-text round"></span>
</label>