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