Checkbox

<ComponentPreview styleName="base-nova" name="checkbox-demo" previewClassName="h-80" />

Installation

npx shadcn@latest add checkbox

<Step>Install the following dependencies:</Step>

npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="checkbox" title="components/ui/checkbox.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

<Checkbox />

Checked State

Use defaultChecked for uncontrolled checkboxes, or checked and onCheckedChange to control the state.

import * as React from "react"

export function Example() {
  const [checked, setChecked] = React.useState(false)

  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Invalid State

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

Examples

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> component for disabled styles.

Group

Use multiple fields to create a checkbox list.

Table

<ComponentPreview styleName="base-nova" name="checkbox-table" previewClassName="p-4 md:p-8" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="base-nova" name="checkbox-rtl" direction="rtl" previewClassName="h-80" />

API Reference

See the Base UI documentation for more information.