Checkbox
A control that allows the user to toggle between checked and not checked.
By clicking this checkbox, you agree to the terms.
Installation
Usage
<Checkbox />Checked State
Use defaultChecked for uncontrolled checkboxes, or checked and
onCheckedChange to control the state.
module Example = {
@react.component
let make = () => {
let (checked, setChecked) = React.useState(() => false)
<Checkbox checked onCheckedChange={v => setChecked(_ => v)} />
}
}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.
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 Base UI documentation for more information.