Shadcn Checkbox for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/checkbox.json

npx shadcn@latest add https://kit.dev/r/aria/checkbox.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/checkbox.json

yarn shadcn@latest add https://kit.dev/r/aria/checkbox.json

bun add react-aria-components lucide-react

npm install react-aria-components lucide-react

pnpm add react-aria-components lucide-react

yarn add react-aria-components lucide-react

"use client";

import { CheckIcon, MinusIcon } from "lucide-react";
import {
  Checkbox as CheckboxPrimitive,
  type CheckboxProps,
  composeRenderProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";

export const Checkbox = (props: CheckboxProps) => {
  const { className, children, ...rest } = props;

  return (
    <CheckboxPrimitive
      className={cn(
        "cn-checkbox cn-checkbox-aria peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
        className

Anatomy

Checkbox
├── CheckboxLabel
├── checkboxVariants
└── CheckboxIndicator

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";

<FieldGroup className="w-fit whitespace-nowrap">
  <Field orientation="horizontal">
    <Checkbox name="terms" />
    <FieldLabel>Accept terms</FieldLabel>
  </Field>
</FieldGroup>

Accessibility

Demos

Invalid

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Basic

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description

Use FieldContent and FieldDescription for helper text.

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the Field for disabled styles.

Group

Use multiple fields to create a checkbox list.

Table

Checkboxes in a table for row selection.

Rtl

Right-to-left checkbox. See the RTL configuration guide for document direction.

API Reference