OtpInputProps
Properties
Section titled “Properties”aria-describedby?
Section titled “aria-describedby?”optional aria-describedby?: string;id(s) of external error/help text.
aria-label?
Section titled “aria-label?”optional aria-label?: string;autoComplete?
Section titled “autoComplete?”optional autoComplete?: string;The attribute that unlocks iOS/Android SMS suggestions.
Default
Section titled “Default”'one-time-code'autoFocus?
Section titled “autoFocus?”optional autoFocus?: boolean;blurOnComplete?
Section titled “blurOnComplete?”optional blurOnComplete?: boolean;Blur the input once complete (dismisses the mobile keyboard).
Default
Section titled “Default”falsechildren?
Section titled “children?”optional children?: ReactNode;className?
Section titled “className?”optional className?: string;defaultValue?
Section titled “defaultValue?”optional defaultValue?: string;Uncontrolled initial value. Ignored when value is provided.
optional dir?: "ltr" | "rtl";disabled?
Section titled “disabled?”optional disabled?: boolean;optional id?: string;Base id; slots derive ${id}-slot-0, …
inputRef?
Section titled “inputRef?”optional inputRef?: Ref<HTMLInputElement>;Ref to the underlying <input>.
invalid?
Section titled “invalid?”optional invalid?: boolean;Sets aria-invalid and data-invalid.
label?
Section titled “label?”optional label?: string;Accessible name for the field.
length?
Section titled “length?”optional length?: number;Number of slots. Positive integer.
Default
Section titled “Default”6optional mask?: string | boolean;Render a mask char instead of the value (sensitive codes). true -> ’•’.
optional mode?: OtpMode;Drives inputMode, pattern, autoCapitalize.
Default
Section titled “Default”'numeric'optional name?: string;Posts natively in a <form> and is the name RHF/Formik bind to.
nonce?
Section titled “nonce?”optional nonce?: string;CSP nonce applied to any injected style.
onBlur?
Section titled “onBlur?”optional 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?”optional 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?”optional 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?”optional 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?”optional pattern?: string | RegExp;Override the allowed-character test (per char). Beats mode when set.
placeholder?
Section titled “placeholder?”optional placeholder?: string;Per-slot placeholder shown while empty.
readOnly?
Section titled “readOnly?”optional readOnly?: boolean;render?
Section titled “render?”optional 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?”optional required?: boolean;slotInteraction?
Section titled “slotInteraction?”optional slotInteraction?: OtpSlotInteraction;‘spatial’ = tap any slot to edit it (auto-degrades to ‘crush’ on iOS, which
cannot fully hide ::selection); ‘crush’ = collapsed-input behaviour everywhere.
Default
Section titled “Default”'spatial'style?
Section titled “style?”optional style?: CSSProperties;transform?
Section titled “transform?”optional 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?”optional value?: string;Controlled value. Sanitized to allowed chars and clamped to length; never throws.
webOTP?
Section titled “webOTP?”optional 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