React One Time Password (OTP) Input Component

One Time Password Input

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Ger CoreUI PRO

Create secure and user-friendly React.js one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.

On this page

Example#

The <COneTimePassword /> and <COneTimePasswordInput /> components create secure React OTP input fields with automatic character navigation and validation. Perfect for two-factor authentication, SMS verification codes, and secure login flows.

One-time password types#

The one-time password input supports different input types for various use cases.

Numeric OTP (default)

Text OTP

Masked OTP (hidden characters)

Placeholders#

Provide visual hints to users by setting placeholder text for OTP input fields. You can use a single character for all fields or specify different placeholders for each field.

Single character placeholder

Different placeholders per field

Letter placeholders

Pre-filled values#

Set initial values using the value prop.

OTP with pre-filled value

Input modes#

Control user input behavior with linear and non-linear modes.

Linear mode (sequential input)

Non-linear mode (free navigation)

Auto-submit#

Enable automatic form submission when all one-time password fields are completed.

Custom layouts#

Create custom one-time password layouts with separators and different field counts.

6-digit OTP with separators

9-digit OTP with separators

•

4-digit PIN

Sizing variants#

One-time password input supports different sizes. You may choose from small, normal (default), and large inputs to match our similarly sized text inputs.

Large OTP input

Default OTP input

Small OTP input

Disabled state#

Disable the entire one-time password input by adding the disabled prop.

Disabled OTP

Readonly state#

Use the readOnly prop to make the one-time password input non-editable but still selectable.

Readonly OTP input

Accessibility#

The one-time password input component is designed with accessibility in mind and follows WCAG guidelines for form inputs.

ARIA Labels: Each input field automatically receives descriptive aria-label attributes
Role Attribute: The container has role="group" to indicate related form controls
Keyboard Navigation: Full keyboard support with arrow keys, tab, and backspace
Screen Reader Support: Clear announcements when values change or validation occurs
Focus Management: Automatic focus handling for seamless navigation

Customizing accessibility#

You can customize the aria-label generation function to provide more specific descriptions:

<COneTimePassword
  ariaLabel={(index, total) => `Enter digit ${index + 1} of your ${total}-digit verification code`}
/>

Keyboard support#

The one-time password input component provides comprehensive keyboard navigation support:

Key	Action
`Arrow Right`	Move focus to next input field
`Arrow Left`	Move focus to previous input field
`Backspace`	Delete current character and move to previous field (if empty)
`Tab`	Move to next focusable element (respects linear mode)
`Shift` + `Tab`	Move to previous focusable element
`Ctrl` + `V` / `Cmd` + `V`	Paste clipboard content and auto-fill fields

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.