Question 1

What is a shadcn checkbox?

Accepted Answer

A shadcn checkbox is a binary toggle for boolean state — "agree to terms", "remember me", multi-select rows in a table, settings flags. It's built on Radix UI's Checkbox primitive (keyboard activation with Space, focus ring, indeterminate state, controlled/uncontrolled modes) and styled with shadcn/ui + Tailwind CSS. Each example in this gallery is a single self-contained TSX file — copy, paste, and ship.

Question 2

Are these checkbox examples free?

Accepted Answer

Yes. Every checkbox example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

How is this different from a plain <input type="checkbox">?

Accepted Answer

A native checkbox is functional but ugly to style cross-browser — the appearance is OS-controlled, focus rings are inconsistent, the check mark doesn't animate. The Radix Checkbox primitive renders a `<button role="checkbox">` that you control with CSS: shadcn ships a styled box with an animated checkmark, theme-aware colors, focus ring that works in dark mode, and smooth check/uncheck transitions. You keep all the keyboard semantics; you gain a consistent visual treatment.

Question 4

When should I use a Checkbox versus a Switch or a Toggle?

Accepted Answer

Checkbox for selecting items in a list, multi-select tables, or form-style settings ("send me emails", "keep me signed in"). Switch for binary settings where the change is immediate and reversible ("airplane mode", "dark mode") — the metaphor is a physical switch flipping. Toggle for buttons that toggle a state visually (text-formatting bold/italic, view mode pressed/unpressed). Pick by intent: select something / activate a setting / press a button.

Question 5

How do I build a checkbox group with select-all + indeterminate?

Accepted Answer

Track an array of selected IDs in state. The select-all checkbox's `checked` prop becomes (a) `true` if all items are selected, (b) `false` if none are, (c) `"indeterminate"` if some are. Pass `"indeterminate"` to Radix Checkbox via the `checked` prop — it renders a horizontal bar instead of a checkmark. Clicking select-all when indeterminate selects all; clicking again deselects all.

Question 6

How do I add a description below the checkbox label?

Accepted Answer

Wrap the Checkbox + label in a `flex items-start gap-3` container, then place a description `

` below the label inside a `

`. Use `text-sm font-medium` for the label and `text-xs text-muted-foreground` for the description. Wire the description's `id` to the checkbox's `aria-describedby` so screen readers announce both the label and the descriptive text.

Question 7

How do I make a checkbox part of a form?

Accepted Answer

shadcn's Checkbox renders a button, not a native input — for form submission, pair with a hidden `` or use react-hook-form / Conform / Formik to manage the value yourself. The shadcn Form primitive (`useForm` + ``) handles this automatically — most checkbox examples in form contexts go through that wrapper.

Question 8

Should I show validation errors inline with the checkbox?

Accepted Answer

Yes, but keep them tight. Render the error `<p className="text-xs text-destructive">` immediately below the checkbox + label cluster (still within the same flex container). For "must accept terms" violations, also add `border-destructive` to the checkbox itself. Avoid hiding the error in a tooltip or stuffing it into the label — error visibility is the whole point of inline validation.

Question 9

How do I install a checkbox example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/checkbox/…`, plus the shadcn/ui Checkbox primitive (and its Radix dependency) if you don't already have them. Wire the `checked` and `onCheckedChange` props to your form state.

Question 10

How do I control checkbox state with useState?

Accepted Answer

`const [checked, setChecked] = useState(false); `. For arrays of checkboxes (multi-select), keep a `Set` of selected IDs and pass `checked={selected.has(item.id)}` per row. Toggling: `setSelected(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next })`.

Question 11

How do I size or restyle the checkbox?

Accepted Answer

Pass className overrides — `className="size-5 rounded-sm"` for a slightly larger square, `"size-6 rounded-md"` for a bigger checkbox in dense forms. The check-mark icon scales proportionally because it uses `currentColor`. For brand colors, override `data-[state=checked]:bg-emerald-500` and the matching `border-emerald-500` to swap the checked color.

Question 12

Can I use a checkbox to show partial / indeterminate state?

Accepted Answer

Yes. Pass `checked="indeterminate"` (the literal string) to the Checkbox. Radix renders a horizontal bar instead of a checkmark, and `aria-checked="mixed"` is set automatically — screen readers announce the partial state. This is the standard pattern for hierarchical select-all controls ("5 of 12 items selected").

Question 13

Which libraries do checkbox examples depend on?

Accepted Answer

Radix UI Checkbox (the behaviour primitive — keyboard, focus, indeterminate, controlled/uncontrolled), shadcn/ui Checkbox (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling), and Lucide React (the Check icon). TypeScript is assumed. React 19 is the baseline. No state library — checkbox state lives in useState or your form library of choice.

Question 14

Are checkbox examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix Checkbox sets `role="checkbox"`, `aria-checked` (true/false/mixed), and supports keyboard activation via Space. Tab navigation puts the focus on the checkbox in DOM order. For checkbox + label combos, wrap the label in a `<label htmlFor={id}>` so clicking the label also toggles the checkbox — a usability win that doesn't cost anything.

Question 15

Can I use these checkbox examples with React Server Components?

Accepted Answer

The Checkbox primitive is a client component because it manages checked state. Wrap it inside a Server Component parent and pass an initial value as a prop. Form-submission patterns work cleanly: the Server Component renders the form skeleton + initial values, and a small `"use client"` checkbox + state manager handles user interaction before submission.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The `data-[state=checked]:` selectors and primary-color tokens are declared identically across versions.

React Checkbox Examples for shadcn/ui

Browse every checkbox example

Frequently Asked Questions