Custom Indicator Checkbox for React

Prefix the classes with the checked variant so they only apply when the box is ticked, here bg-success and border-success. Your classes override the checkbox's own, and no conditional logic is needed. The success color is a theme token: add --success to your theme if it doesn't have one, or use another token like primary or destructive. The box carries a data-checked attribute, which the data-checked: variant matches.

The Checkbox draws its own indicator, a Lucide CheckIcon, and doesn't take one as children. To use another icon, edit the indicator in the checkbox file in your components/ui folder, or add a variant there for the boxes that need it.

Add a size class to the Checkbox, such as size-5. The check icon's size is set in the checkbox's styles, so for a much larger box enlarge the icon there too. Bigger boxes help on touch screens; in dense tables the default size is usually right.

Yes: use theme tokens rather than fixed colors. bg-success reads the --success variable, so light and dark themes can each set their own green. To change every checkbox, edit the checked classes in the checkbox file instead of repeating them on each one.

They can. The checked box needs enough contrast against the page (3:1 for UI parts) and the check needs enough against the fill. The check icon itself is the non-color cue that the box is ticked, so keep it.

Yes, if the colors carry meaning and stay consistent: green for confirmations, destructive for choices like "delete my data". Don't vary colors for decoration, and never let color be the only signal: the label has to say what the box does.