Does it work in native forms?

Yes. Pass name and value; Radix renders a hidden input so the value is submitted with the form.

Can I disable the draw animation?

It is skipped automatically for reduced motion, or remove the transition classes from the path.

FormsAnimated

Checkbox

Checkboxes with a self-drawing check mark and an indeterminate state.

Checkboxes toggle independent options. In Cuelark, the check mark draws itself in when ticked, the box sits in a recessed well until checked, and the indeterminate state makes select-all patterns straightforward.

Preview

Email me about product updatesShare anonymous usageHelps us decide what to build next.Disabled

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/checkbox.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/checkbox.

Builds on: motion

Usage

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

<label className="flex items-center gap-2">
  <Checkbox defaultChecked /> Email me updates
</label>

Examples

Select all

A parent checkbox that turns indeterminate.

All channels

EmailPushSMS

Motion

How it moves

The check mark draws itself in while the box pops with a slight overshoot (GSAP cue-snap).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Checkbox

Extends Radix Checkbox.Root (checked, defaultChecked, onCheckedChange, required, name, …).

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Box size.
checked	boolean \| "indeterminate"	—	Controlled state.

Accessibility

Uses role="checkbox" with aria-checked="mixed" for the indeterminate state.
Wrap it in a <label> or point a label at it with htmlFor and id.
Space toggles; inside a form it submits like a native checkbox.

FAQ

Also searched as: react checkbox · shadcn checkbox · indeterminate checkbox · select all checkbox · tailwind checkbox