Tick check
A checkbox row where one spring fills the box, draws the tick and strikes through the label.
- enhancer
- checkbox
- todo
- toggle
- 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
Tick check 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="Launch list">
<label><input type="checkbox" data-motion="tick-check"> Ship the build</label>
<label><input type="checkbox" data-motion="tick-check"> Update the changelog</label>
<label><input type="checkbox" data-motion="tick-check" checked> Rotate the launch card</label>
</div>import { TickCheck } from "./motion/react/TickCheck";
<TickCheck>Your content</TickCheck><script setup lang="ts">
import TickCheck from "./motion/vue/TickCheck.vue";
</script>
<template>
<TickCheck>Your content</TickCheck>
</template>const el = document.querySelector("#title");
el.dataset.motion = "tick-check";The wrappers: TickCheck.tsx (React, TypeScript) and TickCheck.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-strike | true | strike through the label when checked |
data-motion-color | auto | the fill (empty: the accent) |
Accessibility
- The real checkbox stays in the page (visually hidden) with its label, so it is read as checked or not, Space toggles it and forms submit it. The drawn box, tick and strike are decoration. - Focus draws a ring around the box; a click anywhere on the row toggles it. - The strike can be turned off for lists where a checked item is not a finished one. - Reduced motion fills the box, draws the tick and strikes the label 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
tick-check.js is 1.2 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.