OTP Input - Keep React

The OTP (One-Time Password) Inputs component is a secure and intuitive interface designed to capture verification codes typically sent via SMS or email. It consists of multiple input fields that allow users to enter each digit of the OTP separately, ensuring accurate and quick entry.

Default Input OTP#

A basic OTP input component designed for straightforward entry of one-time passwords, with automatic focus shift and input validation for a smooth user experience.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Group Input OTP#

An OTP input component that groups input fields together, providing a more organized and compact layout for entering one-time passwords efficiently.

Control Input OTP#

A more advanced OTP input component with value handling.

API Reference#

Here is a list of the props that you can pass to the input OTP component:

Property	Description	Type	Default
containerClassName	containerClassName style	string	None
maxLength	Input maxLength	number	6
pattern	Input pattern	regex	^\d+$

Reference#

Our OTP component is built using the input-otp package. For more information , follow the documentation input-otp.

Edit this page Timeline