ns-ui / checkbox-tally-notch
3/7
each check carves a stroke into the tally — the fifth slashes across its group of four
ns-ui
Checkbox group rendered as a carpenter's tally: each check carves a notch stroke into its row and adds a stroke to an aggregate tally cluster in the header, where every fifth stroke slashes diagonally across its group of four. Strokes draw on with a dashoffset sweep and retract on uncheck.
Use when a checklist where the running total matters as much as the individual rows, each check carving a stroke into a header tally cluster (every fifth slashing across the previous four) so progress is countable at a glance without reading the list; pick checkbox-ink-stroke instead for a standalone checkbox or a tri-state parent with no aggregate to show, or checkbox-domino-run when the list is long enough that interruptible select-all is the real problem.
Install
npx shadcn add https://design.helpmarq.comns-ui / checkbox-tally-notch
each check carves a stroke into the tally — the fifth slashes across its group of four
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TallyNotchItem[] | — | — |
| defaultChecked? | string[] | — | — |
| onChange? | (checkedIds: string[]) => void | — | — |
| label? | string | — | heading shown above the group; also the group's accessible name |
| className? | string | — | — |