Components

Input OTP

One-time code boxes, 4 to 6. Typing moves to the next box, paste fills them all, and phones offer the code from the SMS.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/input-otp

Dependencies it brings: @base-ui/react

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

<InputOTP label="Verification code" onValueComplete={verify} />

length: 4, 5 or 6. An error marks every box.

Prop	Type	Default	Description
`label`	`ReactNode`		Figma's Label.
`length`	`4 \| 5 \| 6`	`6`	Figma's Show 5th and Show 6th.
`value / defaultValue`	`string`		The code, in 0-9 digits.
`onValueChange`	`(value: string) => void`		On every change.
`onValueComplete`	`(value: string) => void`		Once every box is filled.
`autoSubmit`	`boolean`	`false`	Submit the form when the code is complete.
`required / helperText / error / disabled / readOnly / name`	`…`		As on Input Field.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`0-9`	Types the digit and moves to the next box.
`Backspace`	Deletes and moves back a box.
`ArrowLeftArrowRight`	Between boxes, the same visual way in Arabic (the boxes read left to right).

The first box takes the label; the others are “Digit 2 of 6”, in the page language.
autocomplete="one-time-code" and inputmode="numeric" for a number pad and the SMS suggestion.

The boxes read left to right: the first digit in the left box, as the code is written in the SMS.

Numerals: Typed Arabic-Indic (٠-٩) and Persian digits are stored as 0-9, so the code works from an Arabic keyboard.
Arabic typography: label-16, centered in each box.