Form

InputOtp

A one-time code in separate cells — typing, Backspace, arrows and paste work across the cells.

Features9

API

Theming

Basic

Six cells bound with ngModel. Type, paste a code, or let the phone fill it from an SMS (autocomplete="one-time-code").

Value: —

Integer only

integerOnly accepts digits only and opens the numeric keyboard on phones. (completed) fires when every cell is filled.

Waiting for 6 digits

2 lines

<tx-input-otp [integerOnly]="true" ariaLabel="Six digit code" (completed)="done.set($event)" /><p class="hint">{{ done() ? 'Completed: ' + done() : 'Waiting for 6 digits' }}</p>

Groups

groupSize adds a separator — 3 reads as 123–456.

Mask

mask hides the characters — for a PIN.

Length

length sets the number of cells; letters are allowed without integerOnly.

Sizes

small, medium and large; variant="filled" like every field.

6 lines

<div class="list">  <tx-input-otp size="small" [length]="4" ariaLabel="Small" />  <tx-input-otp [length]="4" ariaLabel="Medium" />  <tx-input-otp size="large" [length]="4" ariaLabel="Large" />  <tx-input-otp variant="filled" [length]="4" ariaLabel="Filled" /></div>

States

disabled, readonly and invalid.

5 lines

<div class="list">  <tx-input-otp [length]="4" [disabled]="true" ariaLabel="Disabled" [ngModel]="'1234'" />  <tx-input-otp [length]="4" [readonly]="true" ariaLabel="Read only" [ngModel]="'1234'" />  <tx-input-otp [length]="4" [invalid]="true" ariaLabel="Invalid" [ngModel]="'12'" /></div>

Form

Verification inside tx-field: the field names the group, the error shows after submit, (completed) submits by itself.

Verification code

We sent it to +380 •• ••• 42 17

18 lines

<div class="form">  <tx-field    label="Verification code"    hint="We sent it to +380 •• ••• 42 17"    [messages]="{ minlength: 'Enter all 6 digits' }"  >    <tx-input-otp      [formControl]="code"      [integerOnly]="true"      [groupSize]="3"      (completed)="verify()"    />  </tx-field>  <button txButton (click)="verify()">Verify</button>  @if (verified()) {    <tx-message severity="success" icon="check-circle" text="Phone number confirmed." />  }</div>

Design tokens

[dt] changes the inputOtp tokens — wider cells, more space.