OTP Input

One-time code entry. Free, MIT · Forms and input › Numbers, codes and masks

The code is one string with no gaps: a box can only be filled after the ones before it, so focus is redirected to the first empty box. id, aria-describedby and aria-invalid go to the inputs (id to the first).

Installation

npx valyro-cli@latest add otp-input

npx shadcn@latest add https://valyro.xyz/r/otp-input.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { OTPInput } from 'valyro-ui';

Props

Prop	Type	Default
`length`	`number`	`6`	Number of boxes.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`onComplete`	`(value: string) => void`		Called once every box is filled.
`type`	`'numeric' \| 'alphanumeric'`	`'numeric'`	Characters kept from typing and paste: digits only (numeric keypad on phones), or Latin letters and digits.
`separator`	`boolean`	`false`	Draw a dash between the two halves.
`invalid`	`boolean`	`false`	Danger borders and a shake on every box; sets `aria-invalid` on the inputs.
`disabled`	`boolean`	`false`	Disables every box; the code is not submitted with the form.
`autoFocus`	`boolean`		Focus the first box on mount.
`name`	`string`		Submits the code with the surrounding form as one string (possibly partial).
`required`	`boolean`		Every box must be filled for the form to submit; the browser points at the first empty one.
`labels`	`Partial<OTPInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Number Input — Numeric input
Phone Input — Phone number with country picker, live formatting and an E.164 value
Masked Input — Masked input: cards with Luhn check, expiry, CVC, date, time
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges

Previous: Number Input · Next: Phone Input · All Forms and input