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 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.
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 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
| 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 Radix UI documentation for more information.