React One Time Password (OTP) Input Component

One Time Password Input

CoreUI PRO for React.js
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.

Release candidate (RC)

This component is in the Release Candidate phase and its API is considered stable. Minor adjustments may still occur before the final release.

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.

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.

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.

Pre-filled values#

Set initial values using the value prop.

Input modes#

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

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.

-

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.

Disabled state#

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

Readonly state#

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

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:

KeyAction
Arrow RightMove focus to next input field
Arrow LeftMove focus to previous input field
BackspaceDelete current character and move to previous field (if empty)
TabMove to next focusable element (respects linear mode)
Shift + TabMove to previous focusable element
Ctrl + V / Cmd + VPaste 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.