KQ-1514 · TICK/SPRING

Tick Spring

A checkbox whose tick is drawn by an elastic pen: a press squashes the box on its base on springs.flick and lets it go on springs.recoil, and checking draws the tick on a spring of your stiffness and bounce that runs past its end, so the long arm overshoots and springs back while the corner dips under the pen as it turns. The box floods with colour from its centre on springs.snap (or stays outlined while an ink tick swings past its corner), an indeterminate dash bends into the tick on the same spring instead of being erased, and an optional strike sweeps through the label on springs.glide, line by line. It is a native checkbox, so Tab reaches the box, Space toggles it and a form submits it.

KQ-1514 · TICK/SPRING

Pack for the ridge walk

Map and compass

Water filter

Rain shell

1 of 3 packed · space ticks the focused box

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/tick-spring

Props

checked / defaultChecked: boolean | "indeterminate"; default — / false; Ticked, clear, or indeterminate (a dash), controlled or uncontrolled.
onCheckedChange: (checked: boolean) => void; default —; Fires from the press or key that changed it; a press on a dash always ticks.
label: ReactNode; default —; The text beside the box, in a <label> that toggles the box.
description: ReactNode; default —; A quieter second line under the label, linked to the box with aria-describedby.
stroke: number; default 2.25; The pen's width in px.
stiffness: number; default 520; The pen's spring stiffness: higher draws faster and settles sooner.
bounce: number; default 0.5; How far the pen overshoots the end of the tick before it settles, 0 (lands dead) to 1.
strike: boolean; default false; Strike the label through once the tick lands, line by line when it wraps, and dim it.
appearance: "fill" | "ink"; default "fill"; "fill" floods the box behind a light tick; "ink" keeps it outlined and draws the tick in colour, its long arm past the box's corner.
color: string; default "var(--accent-bright)"; The fill (or ink) colour; any CSS colour.
size: "sm" | "md" | "lg"; default "md"; Box 16, 20 or 24px, with the label's line height to match so the box sits on the first line.
name: string; default —; Form field name, submitted while ticked.
value: string; default "on"; The value submitted under `name`.
required: boolean; default —; Native required.
id: string; default generated; The box's id; the label points at it.
sound: boolean; default false; A tick when the pen lands and a lower one when it retracts; only for the box the visitor pressed.
disabled: boolean; default false; Disables the box and dims the row.
className: string; default —; Classes for the row.

Prop	Type	Default	Description
checked / defaultChecked	boolean \| "indeterminate"	— / false	Ticked, clear, or indeterminate (a dash), controlled or uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Fires from the press or key that changed it; a press on a dash always ticks.
label	ReactNode	—	The text beside the box, in a <label> that toggles the box.
description	ReactNode	—	A quieter second line under the label, linked to the box with aria-describedby.
stroke	number	2.25	The pen's width in px.
stiffness	number	520	The pen's spring stiffness: higher draws faster and settles sooner.
bounce	number	0.5	How far the pen overshoots the end of the tick before it settles, 0 (lands dead) to 1.
strike	boolean	false	Strike the label through once the tick lands, line by line when it wraps, and dim it.
appearance	"fill" \| "ink"	"fill"	"fill" floods the box behind a light tick; "ink" keeps it outlined and draws the tick in colour, its long arm past the box's corner.
color	string	"var(--accent-bright)"	The fill (or ink) colour; any CSS colour.
size	"sm" \| "md" \| "lg"	"md"	Box 16, 20 or 24px, with the label's line height to match so the box sits on the first line.
name	string	—	Form field name, submitted while ticked.
value	string	"on"	The value submitted under `name`.
required	boolean	—	Native required.
id	string	generated	The box's id; the label points at it.
sound	boolean	false	A tick when the pen lands and a lower one when it retracts; only for the box the visitor pressed.
disabled	boolean	false	Disables the box and dims the row.
className	string	—	Classes for the row.