OTP Input

A 352px row of five or six square cells for a one-time code. Typing moves on, Backspace moves back, and pasting a code fills every cell.

This is a hint text to help user.

Type, or paste a whole code into any cell.

import { OtpInput } from '@orvain/react';
 
<OtpInput
  length={6}
  mode="numeric"
  hint="Enter the 6-digit code we sent you."
  onComplete={(code) => verify(code)}
/>

Add an empty Orvain OTP Input with 6 cells, square corners, no shadow.

Orvain MCPIncluded with the library

When to use#

For verification codes sent by email or text, usually six digits.
When the code has a fixed, known length, so the cells show how much is left.

When not to use

Use an Input for passwords or codes of unknown length.

Anatomy#

1Cells

52px squares, 8px apart, radius 12 (fully round when Pill), a 1px #e1e1e1 stroke inside.

2Digit

Satoshi Bold 14, centred.

3Cursor

The active cell takes a near-black stroke and a blinking caret.

4Hint

10px below the row: where the code was sent, or why it failed.

States#

Default

Empty cells, the first ready for input.

Valid Fields

Every cell filled.

Empty + Error, Filled + Error

Red strokes and a red hint.

Read Only

The code shows but cannot change.

All Fields Disabled

Grey and inert, while checking or after too many tries.

Source#

Preview – final code pending

The OTP Input is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

inputs sign in