How do I show the indeterminate state?

Pass checked="indeterminate". It shows a dash and announces as mixed, which is what you want for a parent checkbox when only some children are selected.

Is Checkbox free for commercial use?

Yes. Checkbox is MIT licensed: use it in any personal or commercial project and change it however you like.

Does Checkbox work with Next.js?

Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.

Can an AI coding agent install Checkbox?

Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Checkbox's props and source and get_install_command returns the exact command.

Checkbox

The check draws itself in, the box pops, and indeterminate morphs into a dash.

Category: Inputs
Licence: Free, MIT
Built with: React 19, Tailwind CSS 4, Motion
Dependencies: motion, clsx, tailwind-merge

Examples

Checkbox

API reference

Prop	Type	Default
`checked`	`boolean \| "indeterminate"`	—
`defaultChecked`	`boolean`	`false`
`onCheckedChange`	`(checked: boolean) => void`	—
`label`	`ReactNode`	—
`description`	`ReactNode`	—
`disabled`	`boolean`	—

About Checkbox

Checkbox makes the most ordinary control in a form satisfying to use. The check stroke draws in, the box gives a small pop, and the indeterminate state morphs smoothly into a dash, so a select-all row reads clearly.

Checkbox is an input component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.

When to use Checkbox

Task lists and to-do items where completing something should feel good.
Select-all and bulk actions with an indeterminate parent.
Terms and consent checkboxes in sign-up forms.
Filter panels with many options and descriptions.

How it works

The mark is an SVG path whose pathLength animates; the indeterminate dash is the same path morphing. It renders a real checkbox semantics with label and description props wired up, so clicking the label toggles it and the description is announced.

It is a real form control: it has an accessible name, works with the keyboard alone, shows a visible focus ring and announces its state to screen readers. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.

Customizing Checkbox

Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.

The Customize panel next to the preview lets you change label, description, disabled live, and the Code tab updates to match, so the snippet you copy already carries your values.

checked (boolean | "indeterminate").
defaultChecked (boolean, default false).
label (ReactNode).
description (ReactNode).
disabled (boolean).

Goes well with Checkbox

These inputs pieces share its tokens and motion language, so they sit together on one page without clashing.

Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Switch: An animated React toggle switch whose thumb stretches when pressed, like a real switch
Radio Group: An animated React radio group with roving focus and a highlight that glides between card options
Input: An animated React text input with icons, a shake-once error and a success check that draws in

Install Checkbox

npx shadcn@latest add https://charcoalui.com/r/checkbox.json

Checkbox is free and MIT licensed. The command copies checkbox.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.

It pairs well with Confetti, a Pro piece: Tumbling ember confetti from any point, drawn on a throwaway canvas. It does nothing under reduced motion.

Frequently asked questions

How do I show the indeterminate state?: Pass checked="indeterminate". It shows a dash and announces as mixed, which is what you want for a parent checkbox when only some children are selected.
How do I install Checkbox?: Run npx shadcn@latest add https://charcoalui.com/r/checkbox.json. The shadcn CLI copies checkbox.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
Is Checkbox free for commercial use?: Yes. Checkbox is MIT licensed: use it in any personal or commercial project and change it however you like.
Does Checkbox work with Next.js?: Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
Can an AI coding agent install Checkbox?: Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Checkbox's props and source and get_install_command returns the exact command.

Checkbox as Markdown · llms.txt