Components · Mobile only · Inputs
OTP Input
AlphaiOS & Android
One field drawn as cells, so SMS one-time-code autofill works on iOS and Android.
Usage
@nexub/react-native
import { OTPInput } from '@nexub/react-native';
<OTPInput label="Verification code" length={6} onComplete={verify} />Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
OTPInput props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | Accessible name, e.g. "Verification code". |
| length | number | 6 | — |
| value | string | — | — |
| onValueChange | (code: string) => void | — | — |
| onComplete | (code: string) => void | — | Called once all digits are entered. |
| secure | boolean | — | Dots instead of digits (PIN). Turns off one-time-code autofill. |
| error | string | — | — |
| autoFocus | boolean | — | — |
| style | StyleProp<ViewStyle> | — | — |