FormsReact Native

Input OTP

Enter numeric verification codes with native paste and autofill integration.

Public APILumenInputOTPReact Native

Native example

Use Input OTP

The application verifies codes and owns submission. Normalize localized digit input into ASCII; reject invalid or excess input without truncating. Never send or persist credentials from the component.

View captured React Native example

Input OTP rendered in the Expo web renderer Lumen playground — Captured exampleExpo web renderer

import { useState } from 'react'
import { LumenInputOTP } from '@santi020k/lumen-react-native'

export function VerificationCode() {
  const [code, setCode] = useState('')
  return <LumenInputOTP label="Verification code" value={code} onValueChange={setCode}
    length={6} description="Enter or paste six digits" />
}

Reference

Public API

The primary shared and platform-specific options exposed by LumenInputOTP.

API	Values or type	Default	Description
label / value / onValueChange	string / string / (string) => void	Required	Controls at most length ASCII digits; localized edits normalize to ASCII.
length	number	6	Accepts code lengths from one through twelve.
masked	boolean	false	Hides displayed digits.
onComplete	(string) => void	undefined	Reports a newly completed edit; the host verifies and submits.
ref / TextInput props	LumenTextInputRef / TextInputProps	undefined	Preserves native paste, selection and focus.
description / errorMessage	string	undefined	Provides localized supporting copy or host validation.
enabled / readOnly	boolean	true / false	Blocks changes without clearing controlled state.

Native behavior

Design and accessibility

When to use it

Accessibility

Uses one native input for paste, selection, deletion, and SMS code autofill; supports errors and optional masking.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose