Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Custom Indicator Checkbox for React

A checkbox labeled Custom green checkmark. It stays an ordinary outline until it is checked, then the box fills green.

A single checkbox labeled Custom green checkmark. Checked, the box fills green. Until then it looks like an ordinary outline.

Use the green fill when checked should read as done, such as a completed step. For a status that is not a choice, use a Badge. Base UI on React does not ship a green checkbox.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Checkbox anatomy: root, control, indicator, label

Usage

<Field className="w-fit" orientation="horizontal">
  <Checkbox
    className="data-checked:border-success data-checked:bg-success"
    id="custom"
    name="custom"
  />
  <FieldLabel htmlFor="custom">Custom green checkmark</FieldLabel>
</Field>

FAQ

How do I change checkbox colors?

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.

Can I use different icons instead of Check?

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.

How do I make custom-styled checkboxes larger or smaller?

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.

Can I create theme-based checkbox color schemes?

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.

Do custom colors affect checkbox accessibility?

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.

Can I use different colors for different checkbox purposes?

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.

API Reference

Field

Sets orientation="horizontal" and htmlFor="custom". The rest is on the Field page.

Checkbox

Sets id="custom" and name="custom". The rest is on the Checkbox page.

All 12 checkbox examples