OtpInput

free

OtpInput collects short verification codes through a row of single-character fields.

Preview

Dark

import OtpInput from '@/components/composites/OtpInput'

export default function UsageDemo() {
  return (
    <div className="w-full max-w-64">
      <OtpInput />
    </div>
  )
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add OtpInput

Examples

Controlled Value

Use value and onChange when the code is owned by the surrounding view.

Preview

Dark

Enter a code.

import { useState } from 'react'
import OtpInput from '@/components/composites/OtpInput'

export default function ControlledValueDemo() {
  const [code, setCode] = useState('')

  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <OtpInput value={code} onChange={setCode} />
      <p className="text-sm text-muted-foreground">
        {code ? `Current code: ${code}` : 'Enter a code.'}
      </p>
    </div>
  )
}

Completion

onComplete runs after every field contains a character.

Preview

Dark

Waiting for a complete code.

import { useState } from 'react'
import OtpInput from '@/components/composites/OtpInput'

export default function CompletionDemo() {
  const [status, setStatus] = useState('Waiting for a complete code.')

  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <OtpInput
        onComplete={(code) => setStatus(`Code ${code} is complete.`)}
      />
      <p className="text-sm text-muted-foreground" role="status">
        {status}
      </p>
    </div>
  )
}

Alphanumeric Code

Set codeType and length for verification codes that are not six digits.

Preview

Dark

import OtpInput from '@/components/composites/OtpInput'

export default function AlphanumericCodeDemo() {
  return (
    <div className="w-full max-w-42">
      <OtpInput codeType="alphanumeric" length={4} />
    </div>
  )
}

Custom Height

Set height in pixels to override the default control height for each code field.

Preview

Dark

import OtpInput from '@/components/composites/OtpInput'

export default function CustomHeightDemo() {
  return (
    <div className="w-full max-w-64">
      <OtpInput height={48} />
    </div>
  )
}

Disabled

Use disabled to show a code without allowing changes.

Preview

Dark

import OtpInput from '@/components/composites/OtpInput'

export default function DisabledDemo() {
  return (
    <div className="w-full max-w-64">
      <OtpInput defaultValue="482916" disabled />
    </div>
  )
}

API

Prop	Description	Type	Default
`value`	Controlled code value.	`string`	—
`defaultValue`	Initial code for uncontrolled use.	`string`	`''`
`onChange`	Called with the current code whenever a character changes.	`(value: string) => void`	—
`onComplete`	Called when every code field contains a character.	`(value: string) => void`	—
`length`	Number of code fields.	`number`	`6`
`codeType`	Allowed character set.	`OtpCodeType`	`'numeric'`
`autoFocus`	Focus the first code field on mount.	`boolean`	`true`
`disabled`	Prevent code entry.	`boolean`	`false`
`height`	Explicit pixel height for each code field.	`number`	—
`inputClassName`	Additional classes applied to each code field.	`string`	—
`className`	Additional classes applied to the code-field group.	`string`	—

Types

type OtpCodeType = 'numeric' | 'alphanumeric'