Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

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

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

<Checkbox />

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

Accept terms and conditions

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

Accept terms and conditions

Use FieldContent and FieldDescription for helper text.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

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

Enable notifications

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Use checkboxes inside a Table to select rows.

Name	Email	Role
Sarah Chen	sarah.chen@example.com	Admin
Marcus Rodriguez	marcus.rodriguez@example.com	User
Priya Patel	priya.patel@example.com	User
David Kim	david.kim@example.com	Editor