Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Todo Style Checkbox
A React todo-style checkbox with strikethrough text when checked for task completion lists using shadcn/ui and Tailwind CSS
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Todo apps live and die by their checkboxes. This React todo checkbox adds automatic strikethrough and muted styling to label text when checked, using conditional cn utility for dynamic classes. Built with shadcn/ui and transition-all for smooth visual feedback. When users check a task, text immediately strikes through and fades—clear visual completion without removing items from view. Perfect for task lists, checklists, shopping lists, or any interface where marking items complete needs instant visual confirmation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Basic checkbox without styling
Vertical List Checkbox
Multiple checkboxes in list
Disabled Checkbox
Non-interactive states
Indeterminate Checkbox
Partial completion state
Nested List Checkbox
Hierarchical task lists
Data Table
Row selection with checkboxes
Questions you might have
React Disabled Checkbox
A React checkbox in disabled state showing both unchecked and checked variations for read-only or unavailable options using shadcn/ui
React Custom Indicator Checkbox
A React checkbox with custom green checkmark icon and styling using Lucide React icons and shadcn/ui data-state selectors