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 · listConnect 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 var(--border);
border-radius: 0.75rem;
overflow: clip;
}
.switch-list[data-pattern="list"] .switch-row {
border-bottom: 1px solid 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