Component

OTP Input

A row of individual input boxes for one-time password entry. Auto-advance, backspace navigation, and paste support. Uses the headless @refraction-ui/otp-input core.

Lengths

4-digit and 6-digit OTP examples.

4-Digit OTP

6-Digit OTP

Input Types

Numeric, alphanumeric, and disabled modes.

Numeric (default)

Alphanumeric

Disabled

Installation

$pnpm add @refraction-ui/react-otp-input

Usage

tsx

import { OtpInput } from '@refraction-ui/react-otp-input'

export function MyComponent() {
  const [otp, setOtp] = useState('')
  return <OtpInput length={6} value={otp} onChange={setOtp} autoFocus />
}

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Number of OTP digits.
`value`	`string`	`''`	Controlled value.
`onChange`	`(value: string) => void`	--	Callback when value changes.
`type`	`'number' \| 'text'`	`'number'`	Input mode (numeric or alphanumeric).
`autoFocus`	`boolean`	`false`	Auto-focus the first input.
`disabled`	`boolean`	`false`	Disables all inputs.
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the input slots.