Components
Checkbox
A custom checkbox component for forms and selection lists, with support for indeterminate states and smooth toggle animations.
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
Install the component
Run the registry command below to add checkbox to your project.
watermelon add checkboxInstall manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install react-nativeImport the component
Import Checkbox from your local UI registry output.
Import
import { Checkbox } from "@/components/ui/checkbox";Import
Import
import { Checkbox } from "@/components/ui/checkbox"Usage
The Checkbox component is designed for multi-select scenarios and agreement forms. It uses a lightweight native checkmark indicator and supports a fully controlled state.
Basic Usage
Bind the checkbox to a boolean state to handle user selections.
Disabled State
Use the disabled prop to prevent interactions.
API Reference
Checkbox extends all supported props from React Native Pressable.
| prop | type | default | description |
|---|---|---|---|
| checked | boolean | false | The controlled checked state of the checkbox. |
| onCheckedChange | (checked: boolean) => void | - | Callback called when the checked state changes. |
| disabled | boolean | false | Whether the checkbox is interactive. |