OTP Input
A row of single-character boxes for a one-time code. Typing moves to the next box, backspace moves back, and pasting a whole code fills every box at once.
Preview
Enter the code
Sent to a••••@example.com. Try 428193.
When to use
- For verification codes sent by email or text, usually four to eight digits.
- When the code length is fixed and known, so the boxes show how much is left to type.
Reach for something else
- For passwords or codes of unknown length: that is an Input.
Anatomy
- 1
Boxes
One per character, equal width, with a hairline border.
- 2
Separator
Optional gap or dash splitting the code into halves.
- 3
Caret
The focused box shows the ring; it is where the next character lands.
- 4
Hint
Under the row: where the code was sent, or why it failed.
States
Empty
All boxes blank, the first focused.
Filling
Filled boxes hold their digit; focus moves forward.
Complete
Every box filled; the code can be checked.
Error
Boxes and hint turn red when the code is wrong.
Disabled
While checking, or after too many tries.
Accessibility
- Each box is a labelled input — Digit 1 of 6 — or the row is one input drawn as boxes.
- inputmode="numeric" brings up the number pad, and autocomplete="one-time-code" lets the device offer the code.
- Backspace in an empty box moves to the previous one; the arrow keys move between boxes.
- An error is announced through the hint, linked with aria-describedby.
Source
The OTP Input is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block