Shadcn Checkbox: Accessible React Checkboxes for Forms and Tables
The shadcn checkbox is a two-state control for opting in, selecting items, and toggling settings. Instead of fighting the unstylable native input, it builds on the Radix UI checkbox primitive and paints every state, checked, unchecked, indeterminate, disabled, and focused, with Tailwind CSS, so the react checkbox component finally matches your design system.
On this page you will find 13 checkbox examples to copy and paste: simple labeled checkboxes, checkboxes with helper text, card-style selection tiles, checkbox groups, indeterminate parent checkboxes, and colored or disabled states. Each variant is written in TypeScript and works in any Next.js or Vite project.
Where the Shadcn Checkbox fits
Use checkboxes whenever users can pick zero, one, or many options: notification preferences, filter panels, terms acceptance, and bulk row selection in tables. Each checkbox stands alone, so toggling one never affects its neighbors, which is the key contrast with a radio group where options are exclusive.
For a single on-off setting that applies immediately, like enabling dark mode, a switch communicates instant effect better. Keep checkboxes for choices that are submitted with a form or gathered as a set.
Design guidelines
- Make the whole label clickable: Wire the label's htmlFor to the checkbox id so the entire text extends the hit area, not just the small box.
- Write positive labels: Enable notifications is clear. Disable no notifications forces users to parse a double negative.
- Use indeterminate for parents: A select-all checkbox should show the indeterminate state when only some children are checked.
- Stack groups vertically: A vertical list scans faster than options wrapped across a row, especially on mobile screens.
- Never auto-check consent: Legal and marketing opt-ins must start unchecked. Pre-checked consent is a dark pattern and often illegal.
Benefits over the native input
- True indeterminate state: The mixed state is a first-class value rather than a DOM property you must set imperatively.
- Consistent cross-browser rendering: Every browser draws the same Tailwind styled box instead of its own native widget.
- Form compatible: A hidden native input keeps the checkbox working with server actions and standard form submission.
- Composable into cards: The primitive can style an entire selection tile, enabling the card-style variants on this page.
Pairing with other components
Checkboxes rarely appear alone. In settings forms they sit inside a field with a label and description, and filter sidebars stack them under accordion sections. The select-all pattern in a data table header is the classic indeterminate checkbox use case.
For bulk actions, pair header and row checkboxes with a toolbar of buttons that appears when rows are selected. The task and user tables in our dashboard blocks show this full selection workflow.
Primitive support
The component wraps the Radix UI Checkbox primitive, which manages the checked, unchecked, and indeterminate states, keyboard toggling with Space, and the hidden input for form submission. Installation and API details live in the shadcn checkbox docs.
Teams building on Base UI can use the Base UI Checkbox instead. Its data attributes map closely to Radix, so the Tailwind CSS classes in these examples carry over with minimal edits.