OtpInput

pro

OtpInput collects short verification codes through a row of single-character fields.

Installation

Add this component with the NateUI CLI.

npx nateui@latest add OtpInput

pnpm dlx nateui@latest add OtpInput

yarn dlx nateui@latest add OtpInput

Enter a code.

Waiting for a complete code.

Prop	Description	Type	Default
`value`	Controlled code value.	`string`	—
`defaultValue`	Initial code for uncontrolled use.	`string`	`''`
`onChange`	Called with the current code whenever a character changes.	`(value: string) => void`	—
`onComplete`	Called when every code field contains a character.	`(value: string) => void`	—
`length`	Number of code fields.	`number`	`6`
`codeType`	Allowed character set.	`OtpCodeType`	`'numeric'`
`autoFocus`	Focus the first code field on mount.	`boolean`	`true`
`disabled`	Prevent code entry.	`boolean`	`false`
`height`	Explicit pixel height for each code field.	`number`	—
`inputClassName`	Additional classes applied to each code field.	`string`	—
`className`	Additional classes applied to the code-field group.	`string`	—

type OtpCodeType = 'numeric' | 'alphanumeric'