OTP Field

A one-time password / verification code input with auto-focus, paste handling, and validation.

#Installation

npx @dinachi/cli@latest add otp-field

#Usage

tsx

import {
  OTPField,
  OTPFieldGroup,
  OTPFieldInput,
  OTPFieldSeparator,
} from "@/components/ui/otp-field"

tsx

<OTPField length={6}>
  <OTPFieldGroup>
    <OTPFieldInput />
    <OTPFieldInput />
    <OTPFieldInput />
    <OTPFieldInput />
    <OTPFieldInput />
    <OTPFieldInput />
  </OTPFieldGroup>
</OTPField>

#Examples

#API Reference

Prop	Type	Default	Description
length	number	—	The number of OTP input slots. Required so the field can clamp values and detect completion.
value	string	—	The controlled OTP value.
defaultValue	string	—	The initial OTP value when uncontrolled.
onValueChange	(value: string, details: { reason: 'input-change' \| 'input-clear' \| 'input-paste' \| 'keyboard' }) => void	—	Callback fired when the OTP value changes.
onValueComplete	(value: string, details) => void	—	Callback fired when all slots are filled.
onValueInvalid	(value: string, details) => void	—	Callback fired when typed or pasted characters are rejected by validation.
validationType	'numeric' \| 'alphanumeric' \| 'alphabetic'	'numeric'	The type of input validation to apply to the OTP value.
normalizeValue	(value: string) => string	—	Function that normalizes the OTP value after whitespace and validationType filtering.
mask	boolean	false	Whether the slot inputs should mask entered characters.
autoSubmit	boolean	false	Whether to submit the owning form when the OTP becomes complete.
autoComplete	string	'one-time-code'	The input autocomplete attribute. Applied to the first slot and hidden validation input.
inputMode	'numeric' \| 'text' \| 'tel' \| ...	—	The virtual keyboard hint applied to the slot inputs.
name	string	—	Identifies the field when a form is submitted.
form	string	—	Associates the hidden input with a form element id.
required	boolean	false	Whether the user must enter a value before submitting a form.
disabled	boolean	false	Whether the component should ignore user interaction.
readOnly	boolean	false	Whether the user should be unable to change the field value.

Getting started

Foundations

Integrations

Form19

Display5

Layout4

Navigation4

Overlay8

Feedback4

Motion19

OTP Field

#Installation

#Usage

#Examples

#API Reference