OtpInputProps
Properties
Section titled “Properties”aria-describedby?
Section titled “aria-describedby?”"aria-describedby"?: string;id(s) of external error/help text.
aria-label?
Section titled “aria-label?”"aria-label"?: string;autoComplete?
Section titled “autoComplete?”autoComplete?: string;The attribute that unlocks iOS/Android SMS suggestions.
Default
Section titled “Default”'one-time-code'autoFocus?
Section titled “autoFocus?”autoFocus?: boolean;blurOnComplete?
Section titled “blurOnComplete?”blurOnComplete?: boolean;Blur the input once complete (dismisses the mobile keyboard).
Default
Section titled “Default”falsechildren?
Section titled “children?”children?: ReactNode;className?
Section titled “className?”className?: string;defaultValue?
Section titled “defaultValue?”defaultValue?: string;Uncontrolled initial value. Ignored when value is provided.
dir?: "ltr" | "rtl";disabled?
Section titled “disabled?”disabled?: boolean;id?: string;Base id; slots derive ${id}-slot-0, …
inputRef?
Section titled “inputRef?”inputRef?: Ref<HTMLInputElement>;Ref to the underlying <input>.
invalid?
Section titled “invalid?”invalid?: boolean;Sets aria-invalid and data-invalid.
label?
Section titled “label?”label?: string;Accessible name for the field.
length?
Section titled “length?”length?: number;Number of slots. Positive integer.
Default
Section titled “Default”6mask?: string | boolean;Render a mask char instead of the value (sensitive codes). true -> ’•’.
mode?: OtpMode;Drives inputMode, pattern, autoCapitalize.
Default
Section titled “Default”'numeric'name?: string;Posts natively in a <form> and is the name RHF/Formik bind to.
nonce?
Section titled “nonce?”nonce?: string;CSP nonce applied to any injected style.
onBlur?
Section titled “onBlur?”onBlur?: (event) => void;Fires when focus leaves the whole control, never between slots.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLInputElement> |
Returns
Section titled “Returns”void
onChange?
Section titled “onChange?”onChange?: (value) => void;Emits the sanitized string (not an event).
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
value | string |
Returns
Section titled “Returns”void
onComplete?
Section titled “onComplete?”onComplete?: (value) => void;Fires once the value reaches length. The only completion hook — the
library never calls form.requestSubmit() for you; wire submit/verify here.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
value | string |
Returns
Section titled “Returns”void
pasteTransform?
Section titled “pasteTransform?”pasteTransform?: (pasted) => string;Clean pasted text before distributing.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
pasted | string |
Returns
Section titled “Returns”string
Default
Section titled “Default”strips whitespace and - . _ separators
pattern?
Section titled “pattern?”pattern?: string | RegExp;Override the allowed-character test (per char). Beats mode when set.
placeholder?
Section titled “placeholder?”placeholder?: string;Per-slot placeholder shown while empty.
readOnly?
Section titled “readOnly?”readOnly?: boolean;render?
Section titled “render?”render?: (ctx) => ReactNode;Tier 3 escape hatch. Ignored when children are provided.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
ctx | OtpRenderContext |
Returns
Section titled “Returns”ReactNode
required?
Section titled “required?”required?: boolean;slotInteraction?
Section titled “slotInteraction?”slotInteraction?: OtpSlotInteraction;‘spatial’ = tap any slot to edit it (auto-degrades to ‘crush’ on iOS, which
cannot fully hide ::selection); keyboard input always takes precedence over
deferred pointer placement. ‘crush’ = collapsed-input behaviour everywhere.
Default
Section titled “Default”'spatial'style?
Section titled “style?”style?: CSSProperties;transform?
Section titled “transform?”transform?: (value) => string;Normalize each committed value (e.g. s => s.toUpperCase()). Applied after pattern.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
value | string |
Returns
Section titled “Returns”string
value?
Section titled “value?”value?: string;Controlled value. Sanitized to allowed chars and clamped to length; never throws.
webOTP?
Section titled “webOTP?”webOTP?: boolean;Opt into the WebOTP API (Android Chrome): programmatic SMS retrieval +
AbortController cleanup. Layered on top of autocomplete, never instead of
it.
Default
Section titled “Default”false