Spring Check

Checkbox row where the fill swells out of the box centre on a spring, the tick draws itself and a strike-through wipes across the label.

Default

Click a row to check it. With the keyboard the state changes instantly, with a pointer it springs.

Ink

Fill

Check

Box Size28px

Box Radius9px

Font Size18px

Bounce0.2

Strike Lag0.12

Done Opacity0.42

Strike

Disabled

Prop	Type	Default	Description
`label`	`string`	`'Ship the build'`	The words beside the box. The strike-through is exactly their width.
`checked`	`boolean`	`undefined`	Controlled state, bound with v-model:checked. A change from outside animates on the spring.
`defaultChecked`	`boolean`	`false`	Initial state when uncontrolled.
`disabled`	`boolean`	`false`	Dims the row and ignores input.
`color`	`string`	`'#ffffff'`	Ink: the label, the ring, the rule and the focus outline.
`fillColor`	`string`	`'#ffffff'`	The fill that swells out of the box centre.
`checkColor`	`string`	`'#0b0b0f'`	Stroke of the tick drawn over the fill.
`boxSize`	`number`	`28`	Box side in pixels. Ring, gap and row height derive from it.
`boxRadius`	`number`	`9`	Box corner radius in pixels. Half the size makes a circle.
`fontSize`	`number`	`18`	Label size in pixels. The rule thickness derives from it.
`bounce`	`number`	`0.2`	How far the fill swells past full. 0 arrives dead, 0.5 rebounds twice.
`strikeLag`	`number`	`0.12`	Where on the spring the rule starts. 0 wipes with the fill, 0.4 waits for the tick.
`doneOpacity`	`number`	`0.42`	How much ink the words keep once checked.
`strike`	`'left' \| 'center' \| 'right' \| 'none'`	`'left'`	Where the strike-through wipes from, or no rule at all.
`ariaLabel`	`string`	-	Accessible name when the label is not text.

Event	Description
`change`	Emitted with the new boolean on every toggle.
`update:checked`	Emitted alongside change, for v-model:checked.

Slot	Description
`default`	Label content. Replaces the label prop.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space` + `Enter`	Toggles the checkbox.

Rendered as a button with role checkbox and aria-checked. The strike-through is decorative.
With prefers-reduced-motion the state jumps to its end value instead of springing.