Toggles, switches, segments. State you can feel.
A native-feeling .lsd-toggle built from <button role="switch">
— full visual control, no form coupling — plus .lsd-segmented radiogroups
with sliding indicators. 6 style variants · 3 segmented modes · animation chains
via .lsd-fx--*.
.lsd-toggle
Built on <button role="switch" aria-checked="..."> — not
<input type="checkbox">. Tokens: --tog-w,
--tog-h, --tog-pad, --tog-track-off,
--tog-track-on, --tog-thumb, --tog-thumb-shadow.
One delegated click handler flips aria-checked across the whole page.
sm / md (default) / lg
32×18 · 44×24 · 60×32. Padding and thumb scale with the track.
<button data-lsd-toggle class="lsd-toggle lsd-toggle--sm"
role="switch" aria-checked="false"></button>
primary / success / danger
Tone swaps --tog-track-on only. Off-state colour is shared.
<button class="lsd-toggle lsd-toggle--success"
role="switch" aria-checked="true"></button>
off / on / disabled
Disabled dims and removes pointer cursor. Focus ring uses the secondary accent.
<button class="lsd-toggle" role="switch"
aria-checked="true"></button>
Six toggle styles
Each style is one class. Chainable with sizes, tones, and .lsd-fx--* animations.
Thumb icon swap
Sun / moon glyph swaps inside the thumb as state changes. Theme-toggle staple.
<button class="lsd-toggle lsd-toggle--thumb-icon"
role="switch" aria-checked="false"></button>
ON / OFF inside track
Tiny monospace label on the opposite side of the thumb. Reads at a glance.
<button class="lsd-toggle lsd-toggle--label-inside"
role="switch" aria-checked="true"></button>
iOS
Subtle inner track shadow + thumb glow on activation.
<button class="lsd-toggle lsd-toggle--ios
lsd-toggle--success"
role="switch" aria-checked="true"></button>
Material ripple
Press injects an accent ripple expanding from the thumb. JS-assisted.
<button class="lsd-toggle lsd-toggle--material"
role="switch" aria-checked="false"></button>
Brutalist
Sharp 4px corners, 2px ink border, no shadow. Off-state thumb is the ink colour.
<button class="lsd-toggle lsd-toggle--brutalist"
role="switch" aria-checked="true"></button>
Neon glow
Dark track when off, full accent halo when on. Pairs with .lsd-fx--glow-pulse.
<button class="lsd-toggle lsd-toggle--neon"
role="switch" aria-checked="true"></button>
.lsd-segmented
Radio-style multi-option picker. <button role="radio"> inside
<div role="radiogroup">. JS handles arrow-key navigation +
click. The sliding indicator is a ::before on the group, transform
driven by --seg-active-index.
Pill — sliding indicator
Fully rounded pill. The accent fill slides between options.
<div role="radiogroup"
class="lsd-segmented lsd-segmented--pill">
<button role="radio" aria-checked="true">A</button>
<button role="radio" aria-checked="false">B</button>
</div>
Underlined — sliding bar
Bottom border with a 2px accent indicator sliding under the active option.
<div role="radiogroup"
class="lsd-segmented lsd-segmented--underlined"
style="--seg-count: 4;">
...
</div>
Filled — solid accent
Solid accent fill behind the active option. Strongest emphasis of the three.
<div role="radiogroup"
class="lsd-segmented lsd-segmented--filled">
...
</div>
Chain .lsd-fx--*
Animations are universal — buttons, chips, toggles all share the
.lsd-fx--* namespace once /framework-dist/lsd-buttons.css
lands. Local fallbacks in this page mean the demos render today.
Lift on hover
Translates up 2px with a coloured drop shadow.
<button class="lsd-toggle lsd-fx--lift" ...>
Pop scale
Spring overshoot on hover, settle on press.
<button class="lsd-toggle lsd-fx--pop" ...>
Breathing glow when on
Continuous halo while aria-checked="true". Quiet when off.
<button class="lsd-toggle lsd-toggle--neon
lsd-fx--glow-pulse" ...>
Gradient track when on
When on, the track fills with an accent → pink gradient.
<button class="lsd-toggle lsd-fx--slide-fill" ...>
3D thumb flip
Toggle-tailored flip: the thumb rotates 180° on Y while sliding.
<button class="lsd-toggle lsd-fx--flip" ...>
Squash + track-fill
Two animations that only make sense on a toggle thumb — they speak the toggle's own geometry (thumb scale, radial track fill).
Elastic thumb squash
On state change the thumb squashes 1.5× wide × 0.7× tall, then springs back. Spring on the thumb only — track is unaffected.
<button class="lsd-toggle lsd-toggle--squash"
role="switch" aria-checked="false"></button>
Radial track fill
When activating, the track fills with accent radially from the current thumb position. Click anywhere on the track to see it origin from that point.
<button class="lsd-toggle lsd-toggle--track-fill"
role="switch" aria-checked="false"></button>