Input [OTP]

Overview

Input OTP is a purpose-built verification code entry component. It handles every common OTP length and visual style out of the box, with 4 digit count options, separator control, and two item styles, all fully customizable from the parent without detaching, in both Figma and React.

When should you use them?

Use an OTP input whenever a user enters a verification code, such as a one-time SMS code, an authenticator token, or a PIN. The dedicated digit fields make codes easy to read and enter, and signal clearly that a short, fixed-length code is expected.

How should you use them?

• Match the digit count to your code length (4, 5, 6, or 8) so the field guides the user precisely.
• Use separators to visually group longer codes like 8-digit tokens for easier reading.
• Choose the item style (Outline or Filled) and appearance to match your auth or form context.
• Support paste so users can drop in a full code at once, not just type digit by digit.
• Show a clear Error message when a code is wrong or expired, with a way to resend.
• Keep the field keyboard-accessible and auto-advance focus as the user types.