Check Box

Installation

pnpm dlx shadcn@latest add @clover-ui/checkbox

Usage

import { Checkbox } from "@/components/checkbox";

<label className="flex items-center gap-2">
  <Checkbox name="updates" value="yes" />
  Send me product updates
</label>

A rounded checkbox. Click it and the color grows from a dot in the center to fill the box, then the check draws in and colorful sparkles burst out from inside. The whole thing takes about a third of a second. Unchecking runs it backwards: the check pulls back, then the color slides up and away toward the top. Boxes that start checked show right away without sparkles, and reduced motion turns all the motion off. By default it uses your theme's text, background and border colors, so it fits light and dark mode. Unchecking clears it right away.

Use a visible label, aria-label, or aria-labelledby. Tab focuses the checkbox and Space toggles it. Native form submission, required, disabled, and form reset work without extra wiring. ref points to the input. className and style customize the outer wrapper; other native input props go to the checkbox.

For a controlled checkbox:

const [checked, setChecked] = React.useState(false);

<Checkbox
  aria-label="Accept terms"
  checked={checked}
  onCheckedChange={setChecked}
/>

Props