Shadcn Checkbox Components

Shadcn Checkbox Component

The Shadcn Checkbox is a control that lets users turn an option on or off. It appears in almost every form: accepting terms, choosing notification channels, picking several filters or selecting rows in a table. Because it is so common, a checkbox that is clear, easy to hit and fully accessible makes a real difference to how a form feels.

Todo items with an animated strike line, bordered card checkboxes, options that reveal an extra input when checked and a select all parent with a mixed state are the highlights of this shadcn checkbox collection. Each variant is built with shadcn/ui, React and Tailwind CSS and follows the interaction model of the Radix UI and Base UI checkbox primitives.

What is the Shadcn Checkbox Component?

The shadcn/ui checkbox is a button with role="checkbox" rather than a styled native input. It can be checked, unchecked or "indeterminate", which is the mixed state used by a "select all" box when only some children are selected. The state is exposed through aria-checked and a data-state attribute, and when the checkbox sits inside a form a hidden input is rendered so the value is submitted with it.

Use a checkbox when each option is independent and users can pick any number of them, including none. When only one option in a list can be chosen, use a Radio Group. For a single setting that applies immediately, like turning on dark mode, a Switch is the better fit, because a checkbox usually means the change is saved when the form is submitted.

Anatomy of the Shadcn Checkbox

13 Shadcn Checkbox Variants

Each checkbox variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: A single checkbox with a label that contains a link, the classic terms of service agreement.
• Custom color: Overrides the primary and ring variables on a wrapper so the checked box and focus ring use a different color.
• Todo items: A checked item that strikes through its label, and a round checkbox whose strike line animates across the text.
• Horizontal and vertical groups: Several labelled options laid out in a row or stacked in a column for multi select questions.
• With description and expansion: A label, sublabel and helper text linked with aria-describedby, plus a version that reveals and focuses an extra input when checked.
• Card checkboxes: Bordered cards where the whole card is clickable and highlights when checked, with avatar, notification and icon list layouts.
• Indeterminate select all: A parent checkbox for permissions that shows the mixed state when only some of the Read, Write and Delete children are selected.

How to Install the Shadcn Checkbox Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a checkbox variant by its name:

npx shadcn@latest add @shadcnuikit/checkbox1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Checkbox Component

Import Checkbox and Label, give the checkbox an id and point the label at it with htmlFor. Use checked and onCheckedChange to control the value from state.

"use client"

import { useState } from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function MarketingConsent() {
  const [checked, setChecked] = useState(false)

  return (
    <div className="flex items-center gap-2">
      <Checkbox
        id="marketing"
        checked={checked}
        onCheckedChange={(value) => setChecked(value === true)}
      />
      <Label htmlFor="marketing">Send me product updates</Label>
    </div>
  )
}

Why Use the Shadcn Checkbox Component

• Three states: The primitive accepts true, false and indeterminate, so a select all parent only needs to compute its value from the children.
• Accessible by default: The primitive handles the checkbox role, aria-checked, focus and Space key toggling.
• Works with forms: A hidden input is rendered inside forms, so name, value and required behave like a native checkbox.
• Easy to style: State is exposed through data attributes, so checked styles, rounded shapes and colors are regular Tailwind CSS classes.
• Larger hit area: The component adds an invisible area around the box, making it easier to tap on touch screens.

Common Checkbox Use Cases

• Terms and consent: Agreement to terms, privacy policies and marketing emails in sign up forms.
• Settings and preferences: Notification channels, email types and feature options on settings pages.
• Filters: Brand, size or category filters in e-commerce and search sidebars.
• Row selection: Selecting single rows or all rows in a data table for bulk actions.
• Task lists: Todo items and onboarding checklists that users tick off as they go.
• Permissions: Nested permission lists with a parent checkbox that controls its children.

Customizing the Shadcn Checkbox

Style the checked state with the data-[state=checked]: variant, make the box round with rounded-full, or change its color by overriding the --primary variable on a wrapper. To make a whole card act as the checkbox, use has-data-[state=checked]: on the parent to highlight it. Colors come from your theme, and the free Theme Generator can create a matching palette.

For example, this card highlights its border when checked:

<div className="relative flex items-start gap-2 rounded-md border p-4 has-data-[state=checked]:border-primary/50">
  <Checkbox id="backup" className="order-1 after:absolute after:inset-0" />
  <Label htmlFor="backup">Daily backups</Label>
</div>

Checkbox Accessibility and Keyboard Support

The checkbox follows the WAI-ARIA checkbox pattern. It has role="checkbox" and reports aria-checked as true, false or mixed. Always pair it with a visible label linked by htmlFor, or add an aria-label when there is no visible text, such as in a table header.

Connect helper text with aria-describedby so screen readers read it after the label, as the description variants on this page do. When a group of checkboxes answers one question, wrap them in a fieldset with a legend.

Checkbox Best Practices

• Write labels as positive statements, such as Send me updates, so checked always means yes.
• Make the label clickable by linking it to the checkbox; small boxes are hard to hit on their own.
• Use the indeterminate state only for a parent that reflects partly selected children.
• List options vertically when there are more than three, so they are easy to scan.
• Do not use a checkbox to trigger an immediate action; submit the value with the form instead.
• For a single instant setting, use a Switch instead.

Components Related to Checkbox

Shadcn Checkbox FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.