Switches

A switch is a native <input type="checkbox"> inside a .group-switch wrapper. The entire toggle effect — thumb position, track color, and transition — is driven by CSS and the :checked pseudo-class. No JavaScript is needed.

How It Works

The switch is implemented as a styled checkbox. The thumb is a circular SVG injected via background-image, and its position is controlled by background-position:

Unchecked → background-position: left 0rem center — thumb sits on the left, track uses oklch(50% 0 0 / 0.25)
Checked → background-position: right 0rem center — thumb slides to the right, track switches to var(--accent)
Transition → background-position 180ms ease-out produces the sliding animation

The thumb color also changes subtly: #f3f3f3 when off (matches light backgrounds), #fff when on (stands out against the accent track).

Basic Switch

<div class="group-switch">
  <input class="form-checkbox" id="sw-notifications" type="checkbox" />
  <label class="form-label" for="sw-notifications">Enable notifications</label>
</div>

<div class="group-switch">
  <input class="form-checkbox" id="sw-darkmode" type="checkbox" checked />
  <label class="form-label" for="sw-darkmode">Dark mode</label>
</div>

Enable notifications

Dark mode

Inline Layout

Add .group-inline to render the switch and its label as a compact inline unit. Stack multiple inline switches in a flex row for a horizontal option strip.

<div class="is-flex flex-wrap gap-4">
  <div class="group-switch group-inline">
    <input class="form-checkbox" id="sw-wifi" type="checkbox" checked />
    <label class="form-label" for="sw-wifi">Wi-Fi</label>
  </div>
  <div class="group-switch group-inline">
    <input class="form-checkbox" id="sw-bt" type="checkbox" />
    <label class="form-label" for="sw-bt">Bluetooth</label>
  </div>
  <div class="group-switch group-inline">
    <input class="form-checkbox" id="sw-vpn" type="checkbox" checked />
    <label class="form-label" for="sw-vpn">VPN</label>
  </div>
</div>

Wi-Fi

Bluetooth

VPN

Size Variants

Use is-medium or is-large on the .form-checkbox inside .group-switch to scale the track and thumb. The label font size is not affected — size only applies to the toggle control itself.

<!-- Default: 2.5em × 1.25rem -->
<div class="group-switch">
  <input class="form-checkbox" id="sw-sz-default" type="checkbox" checked />
  <label class="form-label" for="sw-sz-default">Default</label>
</div>

<!-- Medium: 3rem × 1.5rem -->
<div class="group-switch">
  <input class="form-checkbox is-medium" id="sw-sz-md" type="checkbox" checked />
  <label class="form-label" for="sw-sz-md">Medium</label>
</div>

<!-- Large: 3.5rem × 1.75rem -->
<div class="group-switch">
  <input class="form-checkbox is-large" id="sw-sz-lg" type="checkbox" checked />
  <label class="form-label" for="sw-sz-lg">Large</label>
</div>

Default — 2.5em × 1.25rem

Medium — 3rem × 1.5rem

Large — 3.5rem × 1.75rem

Disabled States

A disabled switch is non-interactive. The unchecked disabled state uses a lighter track (oklch(50% 0 0 / 0.15)) and a grey thumb to communicate that the off state is locked. The checked disabled state keeps the thumb on the right but drops interactivity.

<!-- Disabled off -->
<div class="group-switch">
  <input class="form-checkbox" id="sw-dis-off" type="checkbox" disabled />
  <label class="form-label" for="sw-dis-off">Disabled (off)</label>
</div>

<!-- Disabled on -->
<div class="group-switch">
  <input class="form-checkbox" id="sw-dis-on" type="checkbox" checked disabled />
  <label class="form-label" for="sw-dis-on">Disabled (on)</label>
</div>

Disabled (off)

Disabled (on)

Settings List Pattern

A common real-world pattern: a vertical list where each row has a title and description on the left and a switch on the right. Use FrontAlign's flex utilities to build this without inline styles.

<div class="is-flex flex-col gap-4" style="max-width: 26rem;">

  <div class="is-flex align-items-center justify-between">
    <div>
      <div class="fw-500 text-sm">Email notifications</div>
      <div class="text-xs text-muted">Receive updates and activity digests</div>
    </div>
    <div class="group-switch mb-0">
      <input class="form-checkbox" id="set-email" type="checkbox" checked />
    </div>
  </div>

  <div class="is-flex align-items-center justify-between">
    <div>
      <div class="fw-500 text-sm">Two-factor authentication</div>
      <div class="text-xs text-muted">Add an extra layer of security</div>
    </div>
    <div class="group-switch mb-0">
      <input class="form-checkbox" id="set-2fa" type="checkbox" />
    </div>
  </div>

  <div class="is-flex align-items-center justify-between">
    <div>
      <div class="fw-500 text-sm">Public profile</div>
      <div class="text-xs text-muted">Let others discover your account</div>
    </div>
    <div class="group-switch mb-0">
      <input class="form-checkbox" id="set-public" type="checkbox" checked />
    </div>
  </div>

  <div class="is-flex align-items-center justify-between">
    <div>
      <div class="fw-500 text-sm">Analytics sharing</div>
      <div class="text-xs text-muted">Help improve the product with usage data</div>
    </div>
    <div class="group-switch mb-0">
      <input class="form-checkbox" id="set-analytics" type="checkbox" disabled />
    </div>
  </div>

</div>

Email notifications

Receive updates and activity digests

Two-factor authentication

Add an extra layer of security

Public profile

Let others discover your account

Analytics sharing

Help improve the product with usage data

Class Reference

Class	Element	Purpose
`.group-switch`	Wrapper	Transforms a checkbox input into a toggle switch with an animated thumb and token-driven track.
`.group-inline`	Modifier on `.group-switch`	Renders the switch and its label as a compact `inline-flex` unit for horizontal stacking.
`.form-checkbox`	`input[type="checkbox"]`	Required on the input. Applies the switch track, thumb SVG, and position transition.
`.is-medium`	`.form-checkbox`	Scales the track to `3rem × 1.5rem`.
`.is-large`	`.form-checkbox`	Scales the track to `3.5rem × 1.75rem`.