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

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.