Input OTP

Ready

One-time code entry.

Installation

$ npx @oratiq-js/ui add input-otp

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { InputOTP } from "@/components/ui/input-otp";

Default

Grouped and masked

Always LTR

The container is pinned to dir="ltr". A code is a sequence, not prose — slot 1 must stay leftmost even in an RTL layout, or users type the digits into reversed positions. Flip the direction toggle above to confirm it holds.

Behaviour

Pasting a full code fills every slot and moves focus to the last one.
Backspace on an empty slot clears the previous slot and steps back.
Arrow keys move between slots rather than within a slot's text.
The first slot carries autocomplete="one-time-code", so iOS and Android offer the SMS code.
Each slot is labelled 'Digit N of M' for screen readers.

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Number of slots.
`groupSize`	`number`	—	Inserts a separator every N slots.
`mask`	`boolean`	`false`	Obscures entered characters.
`onComplete`	`(value: string) => void`	—	Fires when every slot is filled.

View source on GitHub → components/ui/input-otp.tsx