Checkbox
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/checkbox
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react cn
Anatomy
import { Checkbox, CheckboxField } from "@/components/ui/checkbox"
import { Description } from "@/components/ui/field"<CheckboxField>
<Checkbox>Remember me</CheckboxLabel>
<Description>Keep me logged in on this device</Description>
</CheckboxField>Examples
Invalid
The checkbox is in an error state.
Description
Add Description as a child of CheckboxField to provide supporting text.
Indeterminate
The checkbox is in an indeterminate state.
Controlled
Pass isSelected and update it with onChange to control the checkbox.
Uncontrolled
Use defaultSelected to set the initial checked state of an uncontrolled checkbox.
Disabled
The checkbox is disabled.
Component API
CheckboxGroup
CheckboxGroup extends the React Aria Components <CheckboxGroup> component.
classNamestringCheckboxField
CheckboxField extends the React Aria Components <CheckboxField> component.
classNamestringCheckbox
Checkbox extends the React Aria Components <CheckboxButton> component.
classNamestringSee the React Aria for the full API reference.
