Components
Switch
A modern, animated toggle switch for selecting between two mutually exclusive states, optimized for mobile interactions.
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 switch to your project.
watermelon add switchInstall manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install react-nativeImport the component
Import Switch from your local UI registry output.
Import
import { Switch } from "@/components/ui/switch";Import
Import
import { Switch } from "@/components/ui/switch"Usage
The Switch component provides a familiar toggle interface. It uses React Native's Animated API for smooth thumb transitions and haptic-ready interactions.
Basic Usage
Use the switch as a controlled or uncontrolled component.
Disabled State
The switch can be disabled in both checked and unchecked states.
API Reference
Switch extends all supported props from React Native Pressable.
| prop | type | default | description |
|---|---|---|---|
| checked | boolean | false | The controlled checked state of the switch. |
| onCheckedChange | (checked: boolean) => void | - | Callback called when the checked state changes. |
| disabled | boolean | false | Whether the switch is interactive. |
| className | string | - | Standard Tailwind classes for the track. |