Selection
Checkbox
A binary control. The unchecked state is a flat white shape, and checking it grows the fill outward from the centre with a small spring overshoot and the tick drawing on behind it.
Circle
Disabled
Usage
<Checkbox
size={26}
circle
extrude={0}
intensity="normal"
spring="smooth"
>Remember me</Checkbox>How the motion works
The fill uses a spring to scale a copy of the box's silhouette from the centre; it inherits the box radius, so what expands is a rounded square or a disc rather than a generic ripple. Its overshoot remains visible at the edge before settling. The tick trails the fill by 40% of its progress and is drawn by dash offset over a path normalised to pathLength 1, so the stroke lands on colour that has already arrived and the timing holds at any size.
usePressuseSpringValuestroke-dashoffset draw
Limitations
Known gap. The ring is an inset shadow rather than a border, so a custom border width means editing the component rather than passing a prop.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / defaultChecked | boolean | — | Controlled or initial state. |
| onChange | (checked: boolean) => void | — | Fires on toggle. |
| size | number | 26 | Edge length of the box in px. |
| circle | boolean | true | Round box; the fill follows the shape. |
| extrude | number | 0 | Height of the optional bottom edge in px. |
| radius | string | — | Overrides the token radius. Ignored when circle. |
| intensity | "subtle" | "normal" | "strong" | "normal" | Scales the press squash. |
| children | ReactNode | — | Label beside the box; clicking it toggles too. |