OtpInput

One-time-code entry as single-character boxes with a synced hidden input for native form submit. Typing auto-advances, Backspace steps back, pasting a code fills every box.

Example

Verification code

Enter the 6-digit code we sent you.

<OtpInput
  id="code"
  label="Verification code"
  name="code"
  length={6}
  hint="Enter the 6-digit code we sent you."
/>

Error state

That code has expired.

<OtpInput
  id="pin"
  label="PIN"
  name="pin"
  length={4}
  error="That code has expired."
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Base for box ids (`#{id}-0`…) and message ids.
`label`	`string`	`Verification code`	Visible label; targets the first box.
`name`	`string`	`id`	Hidden input form name; submits the joined digits.
`length`	`number`	`6`	Number of digit boxes.
`hint`	`string`	-	Help text below the boxes.
`error`	`string`	-	Error message; sets `aria-invalid` on every box.
`required`	`boolean`	`false`	Marks and enforces required on each box.
`disabled`	`boolean`	`false`	Non-interactive.
`class`	`string`	-	Style passthrough.

Accessibility

Label is a real <label for> pointing at the first box; boxes share one unlabelled group.
Hint and error connect to every box via aria-describedby; error sets aria-invalid="true".
First box carries autocomplete="one-time-code" so platforms can autofill the code.
Boxes use inputmode="numeric" for a digit keyboard on touch devices.