CSS Showcase · Live Demo

Switches that adapt.

A single toggle switch component reshaped into settings rows, a compact grid, selectable cards, a grouped list, and chip toggles — with disabled and pending states animated via transform.

Featured demo

mobile · list
Connect to available networks
Discoverable by nearby devices
Allow alerts and badges
Share position with apps
Pending — awaiting server
Disabled on this account

mobile design patterns

switches-list.css
/* iOS-style grouped list */
.switch-list[data-pattern="list"] {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: clip;
}

.switch-list[data-pattern="list"] .switch-row {
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
}

.switch-list[data-pattern="list"] .switch-row:last-child {
  border-bottom: 0;
}

CSS features used

  • • Container queries
  • • transform-based thumb animation
  • • Disabled & pending states
  • • role="switch" + aria-checked
  • • CSS Grid auto-placement
  • • Semantic tokens