Todo Style Checkbox for React

The checked value lives in state, and cn() adds line-through text-muted-foreground to the FieldLabel when it's true. Ticking the box updates the state, and the label restyles on the next render. The state is updated in onCheckedChange.

transition-colors fades the color; change the speed with duration-300 or duration-75. The line itself can't animate with a plain class, so keep the effect short: completion should feel instant.

Yes. The label stays in place. While checked is true, line-through and text-muted-foreground apply. Clearing the box drops those classes, because cn() adds them only for that state.

The label has to read the same value as the box. This demo keeps checked in state, starts it at false, and passes it through. An uncontrolled box would update itself and the label would not know.

Start the state at true and the task renders already struck through. The checkbox stays controlled, so the label and the box share that one value. Pass checked.

Yes. The strikethrough is only visual; screen readers announce the label and whether the box is checked, which already says the task is done. Keep the text in place rather than swapping it for an icon, and Space toggles the box from the keyboard.