InputOTP -- Accessibility

Keyboard

Key	Action
`0-9`	Enters a digit and auto-advances focus to the next slot.
`a-z`	Enters a letter (when the pattern allows alphanumeric input).
`Backspace`	Clears the current slot and moves focus to the previous one.
`Delete`	Clears the current slot without moving focus.
`ArrowLeft` / `ArrowRight`	Navigate between slots without changing values.
`Home` / `End`	Jump to the first or last slot.
`Ctrl+V` / `Cmd+V`	Paste fills all slots from clipboard content. Only characters matching the allowed pattern are inserted.
`Tab`	Moves focus out of the OTP input entirely (all slots are part of a single logical input).

By default the component only accepts numeric digits (0-9). If the pattern prop is set to a custom regex, matching characters are accepted instead.

ARIA

The underlying element is a single <input> with autocomplete="one-time-code", allowing browsers and password managers to suggest received codes.
Provide an accessible label via a visible <Label> associated with the input, or use aria-label on the InputOTP root when no visible label is present.
Each visual slot is a presentational <div> -- they are not individually focusable. Screen readers interact with the single hidden input.
aria-disabled="true" is set when the disabled prop is passed, preventing all keyboard and pointer interaction.
When used inside a form with validation, associate error messages using aria-describedby pointing to the error text element.

Screen readers

The single hidden input approach means screen readers announce the OTP field as one input, not as six separate fields. This avoids confusing "text field 1 of 6" announcements.
As the user types, the input value updates and the screen reader buffer reflects the full current value.
On paste, the entire value is announced at once.
Provide clear instructions (e.g., "Enter the 6-digit code sent to your email") as a visible label or aria-label so users understand the expected format.

Reduced motion

The caret blink animation inside slots respects prefers-reduced-motion: reduce. When reduced motion is active, the caret is displayed as a static indicator instead of blinking.

Error states

When the entered code is invalid, display an error message below the input and link it with aria-describedby.
Do not rely solely on color to indicate errors -- include a text explanation.
Avoid clearing the user's input on failed validation. Let them correct individual digits.

Native (React Native)

Individual TextInput cells with managed focus.
keyboardType="number-pad" for numeric codes.
Focus auto-advances on character entry.
Each cell has accessibilityLabel set to its position (e.g., "Digit 1 of 6").

Best practices

Always display the expected code length to the user.
Provide a "resend code" mechanism with a cooldown timer.
Auto-submit after the last digit is entered for better UX, but provide a manual submit button as a fallback.
Set inputMode="numeric" (handled by the component) to show a numeric keyboard on mobile devices.
Do not mask OTP digits -- they are short-lived codes, not passwords.