Stretch switch
A switch whose thumb stretches with its speed and squashes against the end it hits; flick it, drag it or press Space.
- enhancer
- switch
- toggle
- checkbox
- spring
- drag
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Stretch switch example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<div class="demo-card" role="group" aria-label="Quick settings">
<p><label>Wi-Fi <input type="checkbox" role="switch" data-motion="stretch-switch" checked></label></p>
<p><label>Bluetooth <input type="checkbox" role="switch" data-motion="stretch-switch"></label></p>
<p><label>Do not disturb <input type="checkbox" role="switch" data-motion="stretch-switch" checked></label></p>
</div>import { StretchSwitch } from "./motion/react/StretchSwitch";
<StretchSwitch>Your content</StretchSwitch><script setup lang="ts">
import StretchSwitch from "./motion/vue/StretchSwitch.vue";
</script>
<template>
<StretchSwitch>Your content</StretchSwitch>
</template>const el = document.querySelector("#title");
el.dataset.motion = "stretch-switch";The wrappers: StretchSwitch.tsx (React, TypeScript) and StretchSwitch.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-stretch | 1 | how much the thumb stretches and squashes (0: none) |
data-motion-color | auto | the track's color when on (empty: the accent) |
Accessibility
- The real checkbox stays in the page with role="switch", so it is read as on or off, Space toggles it, its label names it and forms submit it. The drawn track and thumb are hidden from screen readers. - Focus shows as a ring around the track. A disabled checkbox dims the switch and refuses drags. - Dragging and flicking need no precision: release past the middle, or flick, and it settles; a tap anywhere on the row toggles it. - Reduced motion moves the thumb at once, with no stretch. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.
Size
stretch-switch.js is 1.6 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.