Input OTP
Accessible one-time password component.
Installation
npx nx g @spartan-ng/cli:ui input-otp
ng g @spartan-ng/cli:ui input-otp
Usage
Brain API
BrnInputOtpSlotComponent
Selector: brn-input-otp-slot
BrnInputOtpComponent
Selector: brn-input-otp
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| hostStyles | string | position: relative; cursor: text; user-select: none; pointer-events: none; | Styles applied to the host element. |
| inputStyles | string | position: absolute; inset: 0; width: 100%; height: 100%; display: flex; textAlign: left; opacity: 1; color: transparent; pointerEvents: all; background: transparent; caret-color: transparent; border: 0px solid transparent; outline: transparent solid 0px; box-shadow: none; line-height: 1; letter-spacing: -0.5em; font-family: monospace; font-variant-numeric: tabular-nums; | Styles applied to the input element to make it invisible and clickable. |
| containerStyles | string | position: absolute; inset: 0; pointer-events: none; | Styles applied to the container element. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| inputMode | InputMode | numeric | Virtual keyboard appearance on mobile |
| inputClass | ClassValue | - | - |
| transformPaste | (pastedText: string, maxLength: number) => string | (text) => text | Defines how the pasted text should be transformed before saving to model/form. Allows pasting text which contains extra characters like spaces, dashes, etc. and are longer than the maxLength. "XXX-XXX": (pastedText) => pastedText.replaceAll('-', '') "XXX XXX": (pastedText) => pastedText.replaceAll(/\s+/g, '') |
Models
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | The value controlling the input |
Outputs
| Prop | Type | Description |
|---|---|---|
| completed | string | Emitted when the input is complete, triggered through input or paste. |
Helm API
HlmInputOtpFakeCaretComponent
Selector: hlm-input-otp-fake-caret
HlmInputOtpGroupDirective
Selector: [hlmInputOtpGroup]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputOtpSeparatorComponent
Selector: hlm-input-otp-separator
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputOtpSlotComponent
Selector: hlm-input-otp-slot
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputOtpDirective
Selector: brn-input-otp[hlmInputOtp], brn-input-otp[hlm]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
Examples
Form
Sync the otp to a form by adding formControlName to brn-input-otp .