Swell radio
A radio group of chips where the chosen one swells with a wobble and nudges its neighbors outward.
- enhancer
- radio
- chips
- choice
- form
- spring
- 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
Swell radio 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>
<fieldset data-motion="swell-radio">
<legend>Speed</legend>
<label><input type="radio" name="speed" value="off"> Off</label>
<label><input type="radio" name="speed" value="low"> Low</label>
<label><input type="radio" name="speed" value="medium" checked> Medium</label>
<label><input type="radio" name="speed" value="high"> High</label>
<label><input type="radio" name="speed" value="max"> Max</label>
</fieldset>import { SwellRadio } from "./motion/react/SwellRadio";
<SwellRadio>Your content</SwellRadio><script setup lang="ts">
import SwellRadio from "./motion/vue/SwellRadio.vue";
</script>
<template>
<SwellRadio>Your content</SwellRadio>
</template>const el = document.querySelector("#title");
el.dataset.motion = "swell-radio";The wrappers: SwellRadio.tsx (React, TypeScript) and SwellRadio.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-push | 6 | how far the neighbors move aside |
Accessibility
- Real radio inputs stay in the page (visually hidden) inside their labels and the fieldset's legend, so the group is announced with its name, arrow keys move the choice, Tab reaches the chosen one and forms submit it. - Focus draws a ring around the chip; a click anywhere on a chip picks it. - Reduced motion drops the wobble and moves the neighbors at once. 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
swell-radio.js is 1.1 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.