Skip to content

feat: add OTPInput component#4913

Open
Jasleen-Kaur96 wants to merge 1 commit intocallstack:mainfrom
Jasleen-Kaur96:feat/otp-input
Open

feat: add OTPInput component#4913
Jasleen-Kaur96 wants to merge 1 commit intocallstack:mainfrom
Jasleen-Kaur96:feat/otp-input

Conversation

@Jasleen-Kaur96
Copy link
Copy Markdown

Description

Adds a new OTPInput component to react-native-paper for handling one-time password (OTP) inputs in a structured and accessible way.

Features

  • Configurable input length (default: 6)
  • Controlled component API (value, onChangeText)
  • Automatically focuses next input on entry
  • Handles backspace navigation (clears and moves to previous input)
  • Supports paste and full-code autofill (iOS SMS OTP, Android autofill)
  • Calls onComplete when all digits are filled
  • Accessible with proper labels for each input

Includes

  • Example screen (OTPInputExample)
  • Documentation (otp-input.md)
  • Unit tests covering input, paste, and completion behavior

Motivation

OTP inputs are a common requirement in authentication flows, but currently require custom implementations when using react-native-paper.

This component provides:

  • A consistent UX aligned with Material Design
  • Built-in handling for tricky behaviors (focus management, paste, autofill)
  • A reusable and tested solution within the library

Implementation Notes

  • Built on top of existing TextInput to ensure theme consistency
  • Uses internal theming (useInternalTheme) for proper styling
  • Designed as a controlled component for predictable state management

Related Issue

Closes #4860

@callstack-bot
Copy link
Copy Markdown

Hey @Jasleen-Kaur96, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

OTP Input component

2 participants