Input OTP

Contract

Overview

Machine-readable contract from Component Spec.

component: input-otpexport: InputOTPversion: 1attributes: data-refineui=input-otp

Anatomy

Part	data-refineui
root	input-otp
slot	input-otp-slot

Variants

Axis	Values
size	sm, md, lg

Accessibility

Slot	Element	Role
input-otp	div	group

Keyboard

Key	Action	Native
ArrowLeft	previous-trigger	—
ArrowRight	next-trigger	—

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { InputOTP, InputOTPSlot } from "@refineui/react";

<InputOTP maxLength={6} value={code} onValueChange={setCode}>
  <InputOTPSlot index={0} />
  <InputOTPSlot index={1} />
  <InputOTPSlot index={2} />
  <InputOTPSlot index={3} />
  <InputOTPSlot index={4} />
  <InputOTPSlot index={5} />
</InputOTP>

<InputOTP
  maxLength={4}
  pattern={/\d/}
  size="lg"
  aria-label="Enter verification code"
/>

API Reference

InputOTP

Prop	Default	Type	Description
value	—	string	Controlled OTP string.
defaultValue	—	string	Uncontrolled initial value.
onValueChange	—	(value: string) => void	Event handler when value changes.
maxLength	—	number	Number of slots (required).
pattern	/\d/	RegExp	Per-character allowlist (default: digits only).
size	"md"	"sm" | "md" | "lg"	Control size tier.
disabled	false	boolean	Disables interaction.
autoFocus	false	boolean	Auto-focus on mount.
aria-label	—	string	Accessible name for the control.

InputOTPSlot

Prop	Default	Type	Description
index	—	number	Zero-based slot index (required).