OTPInput

OTP / 2FA code input with paste, auto-focus and backspace handling. Numeric by default; supports alphanumeric for backup/recovery codes.

Examples

Use for SMS / email verification codes. Accepts only 0-9; paste distributes the digits.

Verification code*

We sent a code to your email.

Current: ∅

<OTPInput
  label="Verification code"
  required
  value={code}
  onChange={setCode}
  length={6}
  helperText="We sent a code to your email."
/>

Use pattern='alphanumeric' for 2FA backup codes, vouchers, recovery keys.

Backup code

Use one of the 8-character codes from your account settings.

Current: ∅

<OTPInput
  label="Backup code"
  pattern="alphanumeric"
  length={8}
  value={backup}
  onChange={setBackup}
/>

<OTPInput label="PIN" value={code} onChange={setCode} length={4} />

Verification code

Invalid code. Please try again.

<OTPInput
  label="Verification code"
  value=""
  onChange={() => {}}
  error="Invalid code. Please try again."
/>

Props of the OTPInput component.

Prop	Type	Default	Description
`value*`	`string`	—	—
`onChange*`	`(value: string) => void`	—	—
`onComplete`	`(value: string) => void`	—	Fired when all fields are filled.
`length`	`number`	`6`	—
`pattern`	`'numeric' \| 'alphanumeric'`	`'numeric'`	Allowed characters. alphanumeric accepts letters + digits.
`label`	`string`	—	—
`required`	`boolean`	`false`	—
`helperText`	`string`	—	—
`error`	`string \| boolean`	—	—
`autoFocus`	`boolean`	`true`	—
`align`	`'start' \| 'center'`	`'start'`	—
`disabled`	`boolean`	`false`	—