InputOTP

Atom
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.
src/atoms/input-otp
View in Inputs

Playground

Every control sets a real prop of InputOTPProps. The JSX below updates as you go.
4
8
2
1
Props
length
number
6
value
string
groups
number
1
masked
boolean
alphanumeric
boolean
Size
pick one
disabled
boolean
JSX · InputOTPProps
<InputOTP length={6} value="4821" />

Variants

6 examples from src/atoms/input-otp/input-otp.md, each rendered live from its own JSX.
Length
<InputOTP length={4} />
–
Grouped
<InputOTP groups={3} />
G
Alphanumeric
<InputOTP alphanumeric defaultValue="G" />
●
●
●
●
Masked
<InputOTP masked defaultValue="1234" />
Sizes
<Column relaxed>
<InputOTP small />
<InputOTP />
<InputOTP large />
</Column>
1
2
3
4
Disabled
<InputOTP disabled defaultValue="1234" />

Sizes

4
8
2
1
small
4
8
2
1
default
4
8
2
1
large

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
4
8
2
1
default
4
8
2
1
focus
4
8
2
1
disabled

Anatomy

4
8
2
–
1
Cell
2
Digit
3
Caret
4
Group gap
Dimmed parts appear only in some states or variants.

Props

15 props on InputOTPProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
11 props
length
number
6
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
false
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
false
Focus the field on mount.
disabled
boolean
false
Disable input and dim the cells.
masked
boolean
false
Render a bullet (●) instead of the character, for passcode entry.
ref
React.Ref<RNTextInput>
–
Ref to the underlying React Native host. Supports object refs and callback refs; native methods follow the platform's behavior.
Size
pick one
4 props
small
boolean
false
large
boolean
false
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.

Accessibility and keyboard

Keyboard
Type
Fills the cell and advances
Backspace
Clears and steps back
ArrowLeft
ArrowRight
Moves between cells
Paste
Fills every cell
Semantics
ARIA on web
aria-label
From the docs
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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
●
●
●
●
Web
control 10 · field 10 · card 16 · Instrument Sans
●
●
●
●
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
●
●
●
●
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<InputOTP />
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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bg2
--fd
--fm
--ft
--ln2

Related components