InputOTP

A segmented one-time-code field: length cells display the typed characters while one underlying text input captures the keystrokes, so native SMS autofill, the one-time-code keyboard suggestion, and paste all flow into a single value.
Because that one input spans the whole row, the caret is pinned to the end of the code: tap any cell and the next character still lands in the first unfilled one, so a keystroke can never drop into the middle of a partly-entered code. It works controlled (value + onChangeText) or uncontrolled (defaultValue, or a bare <InputOTP /> that is typeable out of the box); onComplete fires once the code reaches length characters. Style and shape it with semantic props: groups splits the run into dash-separated chunks, alphanumeric accepts letters as well as digits, and small, large, masked, disabled and autoFocus do what they say.
iOS
Android
Web
tsx
<InputOTP />

Props

Prop
Description
length
number
Number of segment cells (and the max code length). Default 6.
value
string
Current code (controlled). Only the typed characters, e.g. "123". Omit for uncontrolled use; a bare <InputOTP /> is typeable out of the box.
defaultValue
string
Starting code for the uncontrolled field. Defaults to empty.
onChangeText
(code: string) => void
Called with the new code (cleaned, sliced to `length`) on each change (both modes).
onComplete
(code: string) => void
Fired once when the code reaches `length` digits.
groups
number
Split the run into groups of this many cells, separated by a dash: `length={6}` with `groups={3}` reads 123-456. Omit for one unbroken run.
alphanumeric
boolean
Accept letters as well as digits, and ask for the text keyboard instead of the number pad. Off by default: a one-time code is digits only.
autoFocus
boolean
Focus the field on mount.
disabled
boolean
Disable input and dim the cells.
masked
boolean
Render a bullet (●) instead of the character, for passcode entry.
small
boolean
Size (pick one; default is the medium cell).
large
boolean
Size (pick one; default is the medium cell).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.
ref
React.Ref<RNTextInput>
Ref to the underlying React Native host. Supports object refs and callback refs; native methods follow the platform's behavior.

Do & Don’t

Readable codes

Don’t
●
●
●
●
●
●
Use masked for a code the user is meant to read back from an SMS; the bullets hide whether they typed it correctly.
Do
–
Size the field to the real code length with length, and split a long code with groups so the eye can chunk it the way the sender wrote it.
← Input
Kbd →