Components
OTP Input
A specialized input field for One-Time Passwords (OTPs), optimized for mobile forms with individual digit boxes and automatic focus management.
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 otp-input to your project.
watermelon add otp-inputInstall manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install react-nativeImport the component
Import OTP Input from your local UI registry output.
Import
import { OTPInput } from "@/components/ui/otp-input";Import
Import
import { OTPInput } from "@/components/ui/otp-input"Usage
The OTPInput component handles the complexities of single-digit input fields, focus management, and keyboard handling. It uses a hidden TextInput to drive the state while rendering a custom 3D-styled grid of cells.
Basic Usage
Controlled usage with a string state.
Custom Length
Adjust the maxLength to fit your verification code requirements (e.g., 4 or 8 digits).
API Reference
OTPInput extends all supported props from React Native View.
| prop | type | default | description |
|---|---|---|---|
| value | string | '' | The current OTP string. |
| onValueChange | (value: string) => void | - | Callback called when the OTP value changes. |
| maxLength | number | 6 | The number of digits to accept. |
| disabled | boolean | false | Whether the input is interactive. |