react-native-otp-input-box/dist/src/OtpInput.d.ts

A customizable, lightweight OTP/PIN input for React Native with paste, SMS autofill, secure entry, ref methods, and more.

import React from "react";
import { ViewStyle, TextStyle } from "react-native";
export interface OtpInputProps {
    /** Number of OTP input boxes */
    length?: number;
    /** Callback when OTP value changes (returns full OTP string) */
    onOtpChange?: (otp: string) => void;
    /** Callback when all digits are entered (useful for auto-submit) */
    onOtpComplete?: (otp: string) => void;
    /** Controlled value - use with onChange for controlled component */
    value?: string;
    /** Initial value for uncontrolled mode */
    defaultValue?: string;
    /** Keyboard type for each input box */
    keyboardType?: "number-pad" | "default" | "numeric" | "email-address";
    /** Auto-focus first input on mount */
    autoFocus?: boolean;
    /** Mask characters (e.g. for PIN/secure entry) */
    secureTextEntry?: boolean;
    /** Disable all inputs */
    disabled?: boolean;
    /** Show error state styling */
    error?: boolean;
    /** Placeholder character when box is empty (e.g. "•", "-", or "" for none) */
    placeholderCharacter?: string;
    /** Auto-blur keyboard when OTP is complete */
    blurOnComplete?: boolean;
    /** Style for input boxes */
    inputStyle?: TextStyle;
    /** Style for focused input */
    focusedInputStyle?: TextStyle;
    /** Style for error state input */
    errorInputStyle?: TextStyle;
    /** Style for disabled input */
    disabledInputStyle?: TextStyle;
    /** Style for the container */
    containerStyle?: ViewStyle;
    /** Gap between input boxes */
    gap?: number;
    /** Auto-fill from SMS (iOS) - requires textContentType="oneTimeCode" */
    autoComplete?: "sms-otp" | "one-time-code" | "off";
    /** Accessibility label for the component */
    accessibilityLabel?: string;
    /** Test ID for testing */
    testID?: string;
}
export interface OtpInputRef {
    /** Clear all inputs and focus first */
    clear: () => void;
    /** Focus on a specific index (default: 0) */
    focus: (index?: number) => void;
    /** Blur all inputs */
    blur: () => void;
    /** Set OTP value programmatically */
    setValue: (value: string) => void;
    /** Get current OTP value */
    getValue: () => string;
}
declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<OtpInputRef>>;
export default OtpInput;