Tally Box
Web (React)
A checkbox whose box springs full and strikes through its label.
Labels are set in the heading serif, the box is a near-square in the primary colour. Good for checklists where finishing an item should feel satisfying.
Installation
CLI
npx @modus-ui/cli add tally-boxManual
- Copy the code from the component tab.
- Create a file at
components/ui/tally-box.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Proof the galleys" | - |
| checked | any | - | - |
| defaultChecked | boolean | false | - |
| onChange | any | - | - |
| disabled | boolean | false | - |
| color | string | "hsl(var(--foreground))" | - |
| fillColor | string | "hsl(var(--primary))" | - |
| checkColor | string | "hsl(var(--primary-foreground))" | - |
| boxSize | number | 28 | - |
| boxRadius | number | 4 | - |
| fontSize | number | 20 | - |
| bounce | number | 0.2 | - |
| strikeLag | number | 0.12 | - |
| doneOpacity | number | 0.42 | - |
| strike | string | "left" | - |
| ariaLabel | any | - | - |
Comments