KikitaUiDocs

import { KuiOtpInput } from '@kikita-labs/ui';

Entered: nothing. Completed: not yet

<div class="otp-example">
  <kui-otp-input [(value)]="code" (complete)="verify($event)" />
  <span>Entered: {{ code() || 'nothing' }}. Completed: {{ verified() || 'not yet' }}</span>
</div>

length defaults to 6. size uses the xs to lg scale of Input. autoFocus focuses the first cell after render.

<div class="otp-example">
  <kui-otp-input mask [length]="4" [(value)]="pin" ariaLabel="PIN code" />
  <kui-otp-input
    [integerOnly]="false"
    [length]="8"
    size="sm"
    [(value)]="backupCode"
    ariaLabel="Backup code"
  />
</div>

Code from email

We sent a 6-digit code to your email. Try 123456.

<div class="otp-example">
  <kui-field
    label="Code from email"
    hint="We sent a 6-digit code to your email. Try 123456."
    [error]="wrong() ? 'Code is wrong or expired' : ''"
  >
    <kui-otp-input [(value)]="code" [loading]="verifying()" [invalid]="wrong()" />
  </kui-field>
  <button kuiButton shape="outline" size="sm" type="button" (click)="toggleVerifying()">
    Toggle loading
  </button>
</div>

Inside kui-field the first cell adopts the field control id, so the label targets it and a click on the label focuses it. The hint and error reach the group through aria-describedby.
kui-otp-input implements FormValueControl<string>: put [formField] on it, not on kui-field. A required validator message and the invalid cell styling stay hidden until the field is touched.
focus(options?) moves focus to the first cell that can take focus, so field().focusBoundControl() works.

import { provideKikitaUi } from '@kikita-labs/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideKikitaUi({
      defaults: {
        otpInput: {
          /* options below */
        },
      },
    }),
  ],
};

Name	Type	Default	Description
size	`'xs' \| 'sm' \| 'md' \| 'lg'`	—	Component size. Takes precedence over the global defaults.size.
mask	`boolean`	—	Masks the entered characters.
integerOnly	`boolean`	—	Accepts digits only.

Name	Type	Default	Description
label	`string`	—	Accessible name of the cell group. Default Verification code.
digit	`KuiMessageFn<{ index: number; total: number; }>`	—	Accessible name of one cell. Default Digit {index} of {total}.
verifying	`string`	—	Name of the verifying state. Default Verifying code.

Name	Type	Default	Description
length	`number`	`6`	Number of cells. Static numeric values are coerced; an invalid or non-positive value uses 1.
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| undefined`	`undefined`	Cell size, the same scale as Input. Falls back to defaults.otpInput.size, then the root size, then md.
mask	`boolean \| undefined`	`undefined`	Renders every cell as type="password" (defaults.otpInput.mask, then false).
integerOnly	`boolean \| undefined`	`undefined`	Restricts input to digits with a numeric mobile keyboard (defaults.otpInput.integerOnly, then true). false accepts letters and digits, uppercased.
autoFocus	`boolean`	`false`	Focuses the first cell that can take focus after the first render, and again on every false to true change.
ariaLabel	`string \| undefined`	`undefined`	Accessible name of the role="group" cell group. Falls back to the otpInput.label message (Verification code).
[(value)]	`string`	`''`	Joined characters of every cell, in order. Set by [formField] or [(value)].
disabled	`boolean`	`false`	Disables every cell with the native attribute. Set by [formField] or directly.
readonly	`boolean`	`false`	Makes every cell read-only and also blocks pasting a new code and the cross-cell Backspace clear.
required	`boolean`	`false`	Marks the code required: the first cell, which the field label points at, gets the native required state. Also follows a required ancestor kui-field.
loading	`boolean`	`false`	Disables every cell, blurs the code in place and shows a centered Loader without changing the group size.
invalid	`boolean`	`false`	Marks every cell invalid. Through [formField] the raw state is gated by touched before it shows.
errors	`readonly ValidationError[]`	`[]`	Current validation errors. Set by [formField].
touched	`boolean`	`false`	Whether the control has been touched. Set by [formField].
(touch)	`void`	`-`	Emitted after any cell edit; marks the control touched in the form system.
(complete)	`string`	`-`	Emitted once with the completed value when every cell becomes filled. It fires again only after the code became incomplete and was refilled.
focus(options?)	`(options?: FocusOptions) => void`	`-`	Moves focus to the first cell that can take focus, so focusBoundControl() works. Does nothing while every cell is disabled.
--kui-otp-gap / -cell-size / -cell-font-size / -loading-blur	`CSS custom properties`	`-`	Gap between cells, the square cell size, the digit font size and the loading blur (2px).
KuiOtpInputOptions	`interface`	`-`	Shape of defaults.otpInput: size, mask and integerOnly.

The group is role="group" with the ariaLabel or the otpInput.label message; each cell has its own Digit N of M name from the otpInput.digit message.
Typing a valid character fills the cell and moves to the next empty one. Backspace on an empty cell clears and refocuses the previous cell. ArrowLeft and ArrowRight move without changing values, and Home and End jump to the first and last cell. Tab leaves the whole group.
Ctrl or Cmd + V distributes a pasted code from the first cell, whichever cell had focus.
The first cell carries autocomplete="one-time-code" for SMS autofill on iOS and Android.
disabled and loading use the native attribute, so the cells leave the tab order. readonly also blocks paste and the cross-cell Backspace clear.

Clearing a cell while later cells stay filled collapses those positions in the joined value, as in other OTP inputs.
There is no built-in success or error status icon after verification.
A formal assistive-technology review has not been run.

OTP Input

Import

Usage

Mask and backup codes

Field, loading and validation

Provider defaults

Messages

API

Accessibility

Known gaps