Open experiment
Elastic blob toggle
A labeled binary preference control built from a native aria-pressed button. Its three-part gel thumb stretches across the track before reforming, while the visible text and programmatic state update together.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-elastic-toggle">
<span class="cmp-elastic-toggle__copy">
<strong>Playful motion</strong>
<small>Elastic interface responses</small>
</span>
<button
class="cmp-elastic-toggle__button"
type="button"
role="switch"
aria-checked="false"
aria-label="Playful motion"
>
<span class="cmp-elastic-toggle__track" aria-hidden="true">
<i class="cmp-elastic-toggle__blob cmp-elastic-toggle__blob--lead"></i>
<i class="cmp-elastic-toggle__blob cmp-elastic-toggle__blob--body"></i>
<i class="cmp-elastic-toggle__blob cmp-elastic-toggle__blob--tail"></i>
</span>
</button>
<span class="cmp-elastic-toggle__status" aria-live="polite">Off</span>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The native button exposes current state through aria-pressed.
- A visible label and status describe the preference.
- Reduced motion moves the thumb without stretching or delayed lobes.
License: MIT License for open-source use, modification, and distribution.