Shadcn.io is not affiliated with official shadcn/ui
Todo Style Checkbox
A React todo-style checkbox with strikethrough text when checked for task completion lists using shadcn/ui and Tailwind CSS
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.
Todo Style Checkbox preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.