Skip to content
Triargos Design

Input OTP

A one-time code, one input per character.

Installation

pnpm dlx shadcn@latest add @triargos/input-otp

Default

Six digits in two groups of three, as authenticator apps print them.

Enter the 6-digit code from your authenticator app.

Four digits

`mask` hides the digits, for a PIN.

Verify

The sixth digit submits. A wrong code shakes the row, clears it and focuses the first slot; a letter shakes its slot.

Try 123456.

States

Incomplete turns only the empty slots; a wrong code turns all of them.