OTP Input

OtpInput takes a one-time code or a PIN. Type six digits, or paste them:

Waiting for 6 digits

OtpInputDemo.tsx

import { Paragraph, View } from '@hozo/core'
import { OtpInput } from '@hozo/ui'
import { useState } from 'react'

export function OtpInputDemo() {
  const [code, setCode] = useState('')
  const [sent, setSent] = useState<string>()
  return (
    <View className="items-start gap-3">
      <OtpInput
        accessibilityLabel="Verification code"
        value={code}
        onChange={setCode}
        onComplete={setSent}
      />
      <Paragraph className="text-sm text-hozo-text-body">
        {sent ? `Checking ${sent}` : 'Waiting for 6 digits'}
      </Paragraph>
    </View>
  )
}

• One field, not six. The cells are drawn over a single input, which is what a screen reader hears (“Verification code, 6 characters”) and what the operating system fills when it offers a code from a text message. A paste of the whole code lands at once.
• value and onChange hold the code as a string. onComplete is called once it is full.
• length is 6 by default. type is number, which brings up a number pad, or text.
• mask hides the characters, for a PIN.
• accessibilityLabel names the field.