Input OTP
Accessible one-time password component with copy-paste support and customizable slot styling.
The Input OTP component provides a user-friendly way to collect verification codes. It supports automatic focus management, masking, and seamless copy-paste integration.
Default OTP
A standard 6-digit configuration using groups and a separator for better readability.
Standard 6-digit verification code
input-otp-example-default.ts
Reactive Forms
Enhanced integration with Angular Reactive Forms, including state feedback and custom paste logic.
input-otp-example-form.ts
Installation & Usage
Installation
Imports
Basic Skeleton
Animation
Ensure you have the following caret animation in your global styles (e.g., styles.css):
API Reference
Brain API (Functional)
The functional logic provided by BrnInputOtp.
| Prop | Type | Description |
|---|---|---|
| maxLength | number | The length of the one-time password. |
| disabled | boolean | Whether the component is disabled. |
| transformPaste | func | A function to transform pasted text (e.g., removing dashes). |
| (completed) | EventEmitter | Emitted when the OTP reaches the maxLength. |
Helm API (Styling)
The helm directives provide the default spartan/ui styling.
| Directive | Selector | Description |
|---|---|---|
| HlmInputOtp | [hlmInputOtp] | Root styling for the OTP component. |
| HlmInputOtpGroup | [hlmInputOtpGroup] | Groups multiple slots together. |
| HlmInputOtpSlot | hlm-input-otp-slot | Renders an individual digit slot. |
| HlmInputOtpSeparator | hlm-input-otp-separator | Decorative separator between groups. |