OTP Input

A one-time-code field drawn as separate slots, with paste and SMS autofill.

Stable

Web

iOS

Android

@advui/core

Source

Basic

Preview

Code

Verification code

Enter the 6-digit code we sent you.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Field, OtpInput } from '@advui/core'

<Field label="Verification code">
  <OtpInput onComplete={verify} />
</Field>

Examples

Grouped and invalid

Preview

Code

Recovery code

That code has expired.

API reference

OtpInput

Also accepts Input props such as `aria-label`, `autoFocus` and `name`.

Prop	Type	Default	Description
`length`	`number`	`6`	Number of characters.
`value`	`string`	—	The code typed so far.
`defaultValue`	`string`	—	Starting `value` when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Called on every change.
`onComplete`	`(value: string) => void`	—	Called once every slot is filled.
`type`	`'numeric' \| 'alphanumeric'`	`'numeric'`	Which characters are kept; others are dropped.
`groupSize`	`number`	—	Draws a dash after every N slots.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Slot size.
`invalid`	`boolean`	`false`	Error styling and `aria-invalid`.
`disabled`	`boolean`	`false`	Not focusable or editable.

Accessibility

It is one text box, so screen readers announce one field and its whole value, not six.
Give it a label with a Field or aria-label; the slots are hidden from assistive technology.
Pasting a full code, or picking it from the SMS suggestion, fills every slot at once.

Keyboard interactions
Key	Action
`Characters`	Fill the next slot.
`Backspace`	Clears the last slot.

Platform notes

Web

autocomplete="one-time-code" lets browsers offer codes from SMS.

iOS

textContentType="oneTimeCode" shows the code from Messages above the keyboard.

Android

autoComplete="sms-otp" lets autofill offer the code from SMS.

Since v0.5.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousNumber Input

NextPassword Input