React One Time Password (OTP) Input Component
One Time Password Input

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:
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.