Shadcn.io is not affiliated with official shadcn/ui
Custom Indicator Checkbox
A React checkbox with custom green checkmark icon and styling using Lucide React icons and shadcn/ui data-state selectors
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.
Custom Indicator Checkbox preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.