KikitaUiDocs

<kui-otp-input [(value)]="code" (complete)="verify($event)" />

No events yet.

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.

Inputs verified against @kikita-labs/ui v2.0.0 public typings.

OTP Input — Playground