Component

OTPField

A one-time code input: single-character slots that fill left to right, accept paste and SMS autofill, and submit as one value.

View component changelog

preview

Enter the 6-digit code

React
"use client"

import { useState } from "react"
import OTPField from "@radui/ui/OTPField"

export default function OTPFieldExample() {
    const [code, setCode] = useState("")

    return (
        <div className="flex flex-col items-center gap-3">
            <OTPField.Root aria-label="Verification code" value={code} onValueChange={setCode} name="code">
                {Array.from({ length: 6 }, (_, index) => <OTPField.Input key={index} />)}
            </OTPField.Root>
            <p className="text-sm">{code.length === 6 ? `Code ${code} is ready` : "Enter the 6-digit code"}</p>
        </div>
    )
}

Features

Slots fill left to right; focusing past the first empty slot moves there
Paste or SMS autofill spreads a full code across the slots
Numeric, alphabetic or alphanumeric validation, and password masking
Submits as one value through a hidden input, with optional auto-submit

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import OTPField from "@radui/ui/OTPField"

export default () => {
    return (
        <OTPField.Root>
            <OTPField.Input />
            <OTPField.Input />
        </OTPField.Root>
    )
}

Root

Holds the code and renders a group of slots plus a hidden input for forms.

Prop	Type	Default
value	string	--
defaultValue	string	""
onValueChange	(value: string) => void	--
length	number	6
validationType	'numeric' \| 'alpha' \| 'alphanumeric' \| 'none'	'numeric'
type	'text' \| 'password'	'text'
onValueComplete	(value: string) => void	--
autoSubmit	boolean	false
name	string	--
disabled	boolean	false
readOnly	boolean	false
required	boolean	false
mask	boolean	false
normalizeValue	(value) => string	--
onValueInvalid	(value, { rejected }) => void	--
inputMode	string	numeric or text
autoComplete	string	"one-time-code"
form	string	--

Input

One character slot. Render one per character, in order. The first offers autocomplete="one-time-code".

Prop	Type	Default
aria-label	string	"Character n of length"
asChild	boolean	false

Keyboard Interactions

Shortcut	Description
`ArrowLeft`	Moves to the previous slot.
`ArrowRight`	Moves to the next filled slot.
`Home`	Moves to the first slot.
`End`	Moves to the last filled slot.
`Tab`	Moves focus in and out of the slots.

ARIA References

Reference	What Rad UI follows
Textbox role	Each slot is a text input named "Character n of length" inside a labelled group.