Needless UI

Components

OTP input

Verification codes in separate slots, on one real input.

Import

import-otp.ts
import { NuiOtp, NuiOtpInput } from '@needless-ui/angular/otp';

NuiOtp

Draws the slots and wraps the input.

Selector
[nuiOtp]
NameTypeDefaultDescription
lengthInputnumber6Number of characters.
patternInput'digits' | 'alphanumeric''digits'digits, or alphanumeric for letters and digits.
groupsInputnumber[][]Group sizes, drawn with a separator between them, such as [3, 3].
maskedInputbooleanfalseDraws dots instead of the characters.
completedOutputstringEmits the code each time the last slot is filled.

NuiOtpInput

The real input. It gets the attributes a one-time code needs.

Selector
input[nuiOtpInput]
NameTypeDefaultDescription
webOtpInputbooleanfalseFills the code from an incoming SMS through the WebOTP API, where supported.