OTP Input

Ввод одноразового кода. Бесплатно, MIT · Формы и ввод › Числа, коды и маски

Установка

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';

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.