OTPField

Base UICopy Anchor Link

OTPField is the labeled control for one-time, verification, and recovery codes. Put the visible label, helper, and error once on Root. You list exactly length OTPField.Input children — Root does not spawn boxes from length. Each slot is a native input with Textfield control chrome; you cannot replace that host.

The visible label names the first slot for assistive tech. Later slots get generated names (Character N of {length}) unless you pass aria-label on that Input. Group chunks with Stack and OTPField.Separator — a visual break, not a character in the code, and not counted in length. Root name submits one concatenated string. fullWidth fills the form column and grows slots equally.

When you set the field invalid and dirty, the slot cluster plays a one-shot wiggle. Keep error copy on Root — the motion is extra, not the only signal. Reduced motion skips the animation. autoSubmit submits a wrapping Base UI Form when every slot is filled.

When to useCopy Anchor Link

• One-time, verification, or recovery codes as a single labeled field
• Numeric, alphanumeric, or masked slot entry with one concatenated form name
• Grouped slot rows with Separator and Stack

When not to useCopy Anchor Link

• Open single-line text (email, search, city) → Textfield
• Expecting boxes from length alone — list one OTPField.Input per slot
• A visible label, helper, or error on each box — those live on Root
• Replacing a slot with a custom host — each Input is always a native input

RelatedCopy Anchor Link

• Textfield — single-line text; OTP slots reuse its control chrome
• Fieldset — shared legend around several fields
• Stack — group gaps between slot clusters

Common examplesCopy Anchor Link

Labeled slotsCopy Anchor Link

A six-slot code with label and helper on Root is the baseline. The visible label names the first slot; later slots get generated names for assistive tech.

Grouped slotsCopy Anchor Link

Split the code into chunks with Stack and OTPField.Separator. Custom Title and helper stay centered above the cluster. When Root omits label, point the first slot at the Title with aria-labelledby.

Form submitCopy Anchor Link

Put name on Root so the form receives one concatenated string. Wrap the field in Base UI Form (@base-ui/react/form); autoSubmit submits that form when every slot is filled. Custom Title replaces Root label for a centered layout — wire the first slot with aria-labelledby.

Invalid completeCopy Anchor Link

On complete, set invalid and dirty on Root so the slot cluster wiggles. With a custom centered title, swap the helper above for error Text — not Root error, and not below the slots. Completing again while still invalid replays the motion.

Masked slotsCopy Anchor Link

mask obscures the characters on shared screens. Custom Title and helper stay visible and centered. Point the first slot at the Title with aria-labelledby.

Ask your agentCopy Anchor Link

Add a six-digit verification code field with a short helper about the code we sent to the device.