Docs / Components
SenseInputOtpComponent
Multi-cell one-time password input from @artificialsenselabs/ui with keyboard navigation, paste support, and forms integration.
Live demo: run nx serve showcase and open /components/input-otp (port 4202).
Overview
Category: Form controls. Selector: sense-input-otp. Import: import { SenseInputOtpComponent } from '@artificialsenselabs/ui';
<sense-input-otp
ariaLabel="Verification code"
[length]="6"
[(ngModel)]="code"
(otpChange)="onCodeChange($event)"
/>Inputs & outputs
| Member | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of single-character cells. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual density preset. |
integerOnly | boolean | true | Restricts input and paste to digits. |
ariaLabel | string | null | null | Accessible name for the OTP group. |
otpChange | SenseInputOtpChangeEvent | — | Emits combined value on typing or paste. |
Accessibility
- Host uses
role="group"with per-digitaria-labelvalues. - Arrow keys move between cells; Backspace moves to the previous cell when empty.
- Paste distributes characters across cells up to
length. - Implements
ControlValueAccessorfor Angular forms integration.