Checkbox

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

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

"use client"

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

Installation


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

Usage

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

<Checkbox />

Checked State

Use defaultSelected for uncontrolled checkboxes, or isSelected and onChange to control the state.

import * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox isSelected={checked} onChange={setChecked} />
}

Invalid State

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

Accept terms and conditions

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

Basic

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

Accept terms and conditions

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

Description

Use FieldContent and FieldDescription for helper text.

Accept terms and conditions

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

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

Disabled

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

Enable notifications

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

Group

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

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

Table

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

"use client"

import * as React from "react"

RTL

To enable RTL support, see the RTL configuration guide.

قبول الشروط والأحكام

بالنقر على هذا المربع، فإنك توافق على الشروط.

تفعيل الإشعارات

يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.

"use client"

import * as React from "react"

API Reference

See the React Aria documentation for more information.

Chart Citations

On This Page

Installation Usage Checked State Invalid State Basic Description Disabled Group Table RTL API Reference