Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Custom Indicator Checkbox
A React checkbox with custom green checkmark icon and styling using Lucide React icons and shadcn/ui data-state selectors
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default checkboxes work, but custom styling makes them yours. This React checkbox uses custom green colors via data-state selectors, applying border-green-500 and bg-green-500 when checked. Built with shadcn/ui and Lucide React's Check icon explicitly rendered as children for custom checkmark styling. The data-[state=checked] selector targets checked state without JavaScript conditionals. Perfect for brand-specific checkboxes, success confirmations, color-coded categories, or any interface where checkbox colors carry meaning beyond default blue.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Default checkbox styling
Todo-Style Checkbox
Checkboxes with completion styling
Indeterminate Checkbox
Three-state checkbox
Button
Custom button colors
Badge
Colored badge components
Vertical List Checkbox
Multiple checkboxes
Questions you might have
React Todo Style Checkbox
A React todo-style checkbox with strikethrough text when checked for task completion lists using shadcn/ui and Tailwind CSS
React Horizontal List Checkbox
A React horizontal checkbox list with flex-wrap layout for compact multi-select options like weekday selection using shadcn/ui