InputOTP

A short code split into one cell per character, for codes that arrive by mail or from an authenticator — reach for Input for anything the reader knows by heart. Six cells by default, and groupSize inserts separators so the reader can check what they typed against what they were sent.

Usage

Examples

Disabled

All cells out together. The code is a single value, so cells are never disabled individually.

With error

The invalid state across every cell, since a wrong code is wrong as a whole rather than in one position.

Numeric

Numeric entry brings up the number keypad, and the otp flag lets a password manager or the OS offer the code it has just received.

Masked

mask hides the characters as they are entered. Reserve it for codes worth hiding — masking a six-digit code the reader is copying off a screen only makes it harder.

With field

Inside Field, so the instruction above the cells comes from FieldLabel and FieldDescription — which is where to say where the code came from.

Props

OTPInput

Prop	Type	Default	Description
groupSize	`number \| undefined`	`2`	Number of inputs per group (separator shown between groups). Set to 0 to disable grouping.
separator	`ReactNode`	`\u2014`	Separator element rendered between groups
error	`boolean \| undefined`	`false`	Error state (maps to Ark UI `invalid`)
form	`string \| undefined`		The associate form of the underlying input element.
title	`string \| undefined`
mask	`boolean \| undefined`		If `true`, the input's value will be masked just like `type=password`
pattern	`string \| undefined`		The regular expression that the user-entered input value is checked against.
defaultChecked	`boolean \| undefined`
defaultValue	`string[] \| undefined`		The initial value of the the pin input when rendered. Use when you don't need to control the value of the pin input.
autoFocus	`boolean \| undefined`		Whether to auto-focus the first input.
id	`string`		The unique identifier of the machine.
tabIndex	`number \| undefined`
rel	`string \| undefined`
onChange	`ChangeEventHandler<T, Element> \| undefined`
type	`"numeric" \| "alphanumeric" \| "alphabetic" \| undefined`		The type of value the pin-input should allow
disabled	`boolean \| undefined`		Whether the inputs are disabled
name	`string \| undefined`		The name of the input element. Useful for form submission.
value	`string[] \| undefined`		The controlled value of the the pin input.
asChild	`boolean \| undefined`		Use the provided child element as the default rendered element, combining their props and behavior.
ids	`ElementIds \| undefined`		The ids of the elements in the pin input. Useful for composition.
placeholder	`string \| undefined`		The placeholder text for the input
readOnly	`boolean \| undefined`		Whether the pin input is in the valid state
required	`boolean \| undefined`		Whether the pin input is required
onValueChange	`complex`		Function called on input change
translations	`IntlTranslations \| undefined`		Specifies the localized strings that identifies the accessibility elements and their states
onValueInvalid	`complex`		Function called when an invalid value is entered
otp	`boolean \| undefined`		If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
onValueComplete	`complex`		Function called when all inputs have valid values
autoSubmit	`boolean \| undefined`		Whether to auto-submit the owning form when all inputs are filled.
blurOnComplete	`boolean \| undefined`		Whether to blur the input when the value is complete
selectOnFocus	`boolean \| undefined`		Whether to select input value when input is focused
sanitizeValue	`((value: string) => string) \| undefined`		Function to sanitize pasted values before validation. Useful for stripping dashes, spaces, or other formatting.
count	`number \| undefined`	`6`	The number of inputs to render to improve SSR aria attributes. This will be required in next major version.
data-testid	`string \| undefined`

#InputOTP

#Usage

#Examples

#Disabled

#With error

#Numeric

#Masked

#With field

#Props

#OTPInput