Component Preview Pro v5.5.23+
Please note that the API for this component is currently in development and may be subject to changes.
Angular One Time Password (OTP) Input Component
Develop secure and user-friendly Angular one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.
Introduced in Pro v5.5.23+Example
The c-one-time-password component and cOtp directive are perfect for creating secure Angular OTP input fields. They offer automatic character navigation and validation, making them ideal for two-factor authentication, SMS verification codes, and secure login flows.
One-time password types
The one-time password input supports various input types for different use cases.
Placeholders
Provide visual cues to users by displaying placeholder text in the input fields for OTP. 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.
Validation state
Use the valid prop to indicate input validity.
Forms
Angular handles user input through reactive and template-driven forms. CoreUI One Time Password OTP Input for Angular supports both approaches.
Reactive
The Angular OTP Input component can be used with reactive forms. You can bind the OTP Input value to a form control using the formControlName directive.
Template-driven
The Angular OTP Input component can be used in template-driven forms. You can bind the value to a template variable using the ngModel directive.
Accessibility (a11y)
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-labelattributes - 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:
const 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 |
|---|---|
| ArrowLeft | Moves focus to previous field |
| ArrowRight | Moves focus to next field |
| Backspace | Delete current character or move to a 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 |
Customizing
CSS Classes
The One Time Password Input components use the following CSS classes:
.form-otp- Applied to the wrapper container.form-otp-sm- Small size variant.form-otp-lg- Large size variant.form-otp-control- Applied to individual input elements
SASS variables
API reference
OTP Module
OTP Standalone
c-one-time-password
component
Inputs
| name | description | type | default |
|---|---|---|---|
ariaLabel |
Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs. | (index: number, total: number) => string |
`(index: number, total: number) => 'Digit ${index + 1} of ${total}' |
autoSubmit |
Automatically submit the form when all one time password fields are filled. | boolean |
false |
defaultValue |
Initial value for one time password input. | string | number |
'' |
disabled |
Disable all one time password (OTP) input fields. | boolean |
false |
valid |
OTP input validation state. | boolean | undefined |
undefined |
linear |
Ensure that users fill in the fields in a sequential order. | boolean |
true |
masked |
Display the input as a password (with masked characters). | boolean |
false |
placeholder |
Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character. | string |
'' |
readOnly |
Make Angular OTP input component read-only. | boolean |
false |
sizing |
Sets the visual size of the Angular one time password (OTP) input. Use sm for small or lg for large input fields. |
sm | lg |
'' |
type |
Input validation type: number for digits only, or text for free text. |
number | text |
number |
value |
Calue for OTP input. | number | string |
'' |
Outputs
| name | description | type |
|---|---|---|
valueChange |
Event triggered when the Angular one time password (OTP) value changes. | string |
complete |
Emits an event when all Angular one time password (OTP) fields are filled | void |
input[cOtp]
directive