Checkbox Check Draw
The box fills from its center and the tick strokes itself in over the fill.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Checkbox Check Draw
*
* The box fills from its center and the tick strokes itself in behind
* the fill, so the two read as one gesture rather than a swap. A realAbout this pattern
Two beats read as one gesture: an accent square grows out of the middle of the empty box, and a fraction of a second later the tick strokes across it. Ordering them that way is the whole trick — a mark that arrives before its background looks pasted on, and a mark that arrives with it is just a swap. The fill spring is damped so the box never overshoots and pushes the tick past its own frame. Unchecking runs shorter and eases in, because undoing a choice is not an event.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Option rows where the box has to stay quiet next to the total.
Related patterns
- Multi Select ChipsPicked options become chips in the row above the list, and the chips already there slide over to take each new one in.
- Toggle Group SelectOne highlight slides between grouped buttons and resizes to each label.
- Toggle Switch SlideThe knob travels across the track while the accent fill comes up under it, settling once.