TwitterGithub

Input OTP

Accessible one-time password component.

Installation

npx nx g @spartan-ng/cli:ui input-otp

Usage

Brain API

BrnInputOtpSlotComponent

Selector: brn-input-otp-slot

BrnInputOtpComponent

Selector: brn-input-otp

Inputs

PropTypeDefaultDescription hostStyles string position: relative; cursor: text; user-select: none; pointer-events: none; - 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; - containerStyles string position: absolute; inset: 0; pointer-events: none; - disabled boolean false Determine if the date picker is disabled. inputMode InputMode numeric Virtual keyboard appearance on mobile inputClass string -- 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

PropTypeDefaultDescription value unknown - The value controlling the input

Outputs

PropTypeDescription 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

PropTypeDefaultDescription class ClassValue --

HlmInputOtpSeparatorComponent

Selector: hlm-input-otp-separator

Inputs

PropTypeDefaultDescription class ClassValue --

HlmInputOtpSlotComponent

Selector: hlm-input-otp-slot

Inputs

PropTypeDefaultDescription class ClassValue --

HlmInputOtpDirective

Selector: brn-input-otp [hlm]

Inputs

PropTypeDefaultDescription class ClassValue --

Examples

Form

Sync the otp to a form by adding formControlName to brn-input-otp .

Label Input