InputOTP

One-time-code input: one real text field with presentational slots.

Playground

Change the inputs, watch the outputs and copy the usage code.

InputOTP

One real text input with filtered slots, native paste and completion state.

Enter the code

Inputs

Slots

Disabled

Events

No events yet. Interact with the preview to see them here.

Template

<qz-input-otp [length]="6" [(value)]="code" (completed)="onCodeEntered($event)" />

Text, file and form controls

Loading demo…

$ npm install @quartz-headless/core @quartz-headless/primitives

// exports
import { InputOtpComponent } from '@quartz-headless/primitives';

Prefer owning the source? Copy it with the CLI.