import { Component } from '@angular/core';
import { WrInputOtp } from 'ngwr/input-otp';
@Component({ imports: [WrInputOtp] })
export class MyComponent {}Input OTP
Enter a one-time code, one character per box.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic (numeric, 6 cells)
completed fires when every box is filled; paste 123456 to try it.
<wr-input-otp [(value)]="code" (completed)="onCompleted($event)" />Custom length
length sets the number of boxes.
<wr-input-otp [(value)]="codeShort" length="4" />Alphanumeric
mode="alphanumeric" accepts letters as well as digits.
<wr-input-otp [(value)]="alphaNumeric" mode="alphanumeric" length="8" />Masked
mask hides the characters like a password field.
<wr-input-otp [(value)]="secret" mask />Disabled and read-only
Disabled leaves the tab order and submits nothing; read-only keeps both and refuses typing and paste.
<wr-input-otp disabled [(value)]="code" />
<wr-input-otp readonly [(value)]="code" />API
| Name | Description | Type | Default |
|---|---|---|---|
ariaLabel | Accessible name of the whole strip. Falls back to inputOtp.label. | string | null | null |
length | Number of cells to render. Clamped to [1, 20]. | number | 6 |
mode | Character set per cell. | WrInputOtpMode | 'numeric' |
size | Control size — shares the --wr-control-* contract. A box carries no size of its own: the host modifier sets --wr-input-otp-size / -font / -radius / -gap and every box reads them from the cascade, so one value sizes the whole strip however many boxes length renders. | WrInputOtpSize | 'md' |
mask | Mask the typed characters like a password. | boolean | false |
disabled | Disable interaction. Bound automatically from the field's disabled state when used with [formField]. | boolean | false |
readonly | Refuse edits while every box stays focusable and the code still submits. Bound automatically from the field's readonly state when used with [formField]. Each box is a real text input, so this is the native readonly attribute — arrow keys, Home / End and selection keep working, which is the whole difference from disabled. Paste is cancelled too, since a paste still reaches a read-only input even though typing does not. | boolean | false |
placeholder | Character shown in empty cells. | string | '•' |
value | The entered code. Bound by [formField], or two-way via [(value)]. | string | '' |
(completed) | Fires on every change made while every cell holds a character — so correcting a digit of an already-complete code emits again. Not latched on the incomplete-to-complete transition: a host auto-submitting on it has to guard its own re-entry, and gets the corrected code for free. | string | — |
(touch) | Emitted on blur so a bound field can mark itself touched. | void | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/input-otp's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-input-otp-bg | var(--wr-color-surface) | .wr-input-otp |
--wr-input-otp-border | var(--wr-border-base) | .wr-input-otp |
--wr-input-otp-cell-font-family | var(--wr-font-family-mono, monospace) | .wr-input-otp |
--wr-input-otp-cell-font-weight | var(--wr-font-weight-medium) | .wr-input-otp |
--wr-input-otp-cell-line-height | var(--wr-leading-none) | .wr-input-otp |
--wr-input-otp-color | var(--wr-color-on-surface) | .wr-input-otp |
--wr-input-otp-focus | var(--wr-color-primary) | .wr-input-otp |
--wr-input-otp-font | var(--wr-text-lg) | .wr-input-otp +2 variant overrides |
--wr-input-otp-font-family | var(--wr-font-family-base) | .wr-input-otp |
--wr-input-otp-gap | var(--wr-space-sm) | .wr-input-otp +2 variant overrides |
--wr-input-otp-radius | var(--wr-control-radius-md) | .wr-input-otp +2 variant overrides |
--wr-input-otp-size | 2.5rem | .wr-input-otp +2 variant overrides |
Dependencies
| Built on | Form |
|---|
See also
Component InputA directive that styles a native <input> or <textarea>.Component Form FieldWraps a form control with a label, a hint and its error messages.Guide FormsBind ngwr controls to any Angular form and show their errors.Component QR CodeDraws a QR code on a canvas, encoded by Project Nayuki's library (MIT).Component FormA plain layout wrapper for a label, a control and its error.