Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-input-otpUsage
import { InputOtp } from '@/components/docyrus-native/input-otp';
<InputOtp value={code} onValueChange={setCode} onComplete={handleVerify} />
<InputOtp length={4} mask />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | Current OTP value |
onValueChange | (value: string) => void | — | Value change handler |
onComplete | (value: string) => void | — | Called when all digits are entered |
length | number | 6 | Number of digits |
size | 'sm' | 'md' | 'lg' | 'md' | Cell size |
disabled | boolean | false | Disable interaction |
invalid | boolean | false | Show invalid state |
mask | boolean | false | Mask entered digits |
className | string | — | Additional CSS classes |
cellClassName | string | — | Individual cell CSS classes |
textClassName | string | — | Digit text CSS classes |
accessibilityLabel | string | — | Accessibility label |
Type Exports
| Type | Description |
|---|---|
InputOtpProps | Props for InputOtp component |
InputOtpSize | 'sm' | 'md' | 'lg' |