Sticker Checkbox
A kiss-cut square you apply: the tick lands from oversize with a squash and the box takes its vinyl edge in the same beat.
InputsClient componentlucide-react
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-checkboxPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerCheckbox } from "@/components/ui/sticker-checkbox"The file lands in components/ui/sticker-checkbox.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| indeterminate | boolean | false | Partial selection. Assigned as a DOM property after render, because the attribute does nothing. |
| children | ReactNode | - | Visible label. Without one, pass an aria-label. |
| checked / defaultChecked / onChange | native | - | It is an <input type="checkbox">, so it submits with the form. |
Rules
What keeps this component from turning into noise.
- The box draws at 20px and the tap target at 24px, so the die-cut look does not cost you WCAG 2.5.8.
- Inside a StickerCard with peel, the card clips its overflow — check the focus ring is not cropped.