Search documentation
Search pages, components, blocks, styles and colours.
A control that allows the user to toggle between checked and not checked.
By clicking this checkbox, you agree to the terms.
Installation
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.
Basic
Pair the checkbox with Field and FieldLabel for proper layout and labeling.
Description
Use FieldContent and FieldDescription for helper text.
By clicking this checkbox, you agree to the terms and conditions.
Disabled
Use the isDisabled 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
| Name | 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 |
API Reference
See the React Aria documentation for more information.