Task Checkbox

A todo checkbox that celebrates completion with a confetti burst and strikethrough.

@spectrumui/task-checkbox

Today

1/4

Review onboarding wireframes

Post standup update

Send the June invoice

Draft the changelog entry

Check a task — fill, check draw, confetti and a strikethrough sweep

Installation

Usage

import { TaskCheckbox } from "@/components/spectrumui/task-checkbox"

<TaskCheckbox label="Ship the changelog" onCheckedChange={(checked) => console.log(checked)} />

API Reference

TaskCheckbox

Renders a row with a button exposing role="checkbox" and aria-checked; the label text toggles too. Pass checked to control it from outside, or defaultChecked to let it manage its own state.

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state. Leave undefined for uncontrolled usage
`defaultChecked`	`boolean`	`false`	Initial checked state when uncontrolled
`onCheckedChange`	`(checked: boolean) => void`	-	Fires with the next checked state on every toggle
*`label`	`React.ReactNode`	-	Task text next to the box; struck through while checked
`description`	`React.ReactNode`	-	Optional secondary line rendered under the label
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the row
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction
`className`	`string`	-	Additional classes merged onto the row wrapper

Examples

Sizes

Small — water the plants

Medium — file the expense report

Large — book flights to Lisbon

Prepare the launch checklistBlocks the Friday release review