OTP Input

Forms

A 4–6 digit one-time password input with individual cells, auto-advance on entry, and auto-submit when complete.

Installation

bash

npx native-mate add otp-input

Examples

#FAFAFA

Radius100%

Usage

tsx

import { OtpInput } from '~/components/ui/otp-input'
import { useState } from 'react'

const [code, setCode] = useState('')

<OtpInput
  length={6}
  value={code}
  onChangeText={setCode}
  onComplete={(val) => verifyCode(val)}
/>

// 4-digit PIN
<OtpInput length={4} onComplete={handlePin} />

Props

Prop	Type	Default	Description
length	number	6	Number of OTP digit cells (4 or 6 recommended).
value	string	—	Controlled OTP string value.
onChangeText	(value: string) => void	—	Called with the concatenated digit string on each change.
onComplete	(value: string) => void	—	Called once all cells are filled.
autoFocus	boolean	true	Automatically focuses the first cell on mount.
error	string	—	Error message shown below the cells.

Example

tsx

import { useState } from 'react'
import { OtpInput } from '~/components/ui/otp-input'
import { Text } from '@native-mate/core'
import { View } from 'react-native'

export function OtpInputExample() {
  const [code, setCode] = useState('')
  const [status, setStatus] = useState<'idle' | 'verifying' | 'success' | 'error'>('idle')

  const handleComplete = async (val: string) => {
    setStatus('verifying')
    const ok = await verifyCode(val)
    setStatus(ok ? 'success' : 'error')
  }

  return (
    <View style={{ gap: 16, padding: 24, alignItems: 'center' }}>
      <Text size="lg" weight="semibold">Enter verification code</Text>
      <Text color="muted">We sent a 6-digit code to your email</Text>
      <OtpInput
        length={6}
        value={code}
        onChangeText={setCode}
        onComplete={handleComplete}
        error={status === 'error' ? 'Incorrect code. Try again.' : undefined}
      />
    </View>
  )
}

Radio

Action Sheet