A one-time code input with a separate box for each character.
boolean |
false |
Whether to submit the owning form when the OTP becomes complete. |
defaultValue | string | – | The uncontrolled OTP value when the component is initially rendered. |
disabled | boolean | false | Whether the component should ignore user interaction. |
form | string | – | A string specifying the |
id | string | – | The id of the first input element. Subsequent inputs derive their ids from it ( |
inputMode | "search"|"text"|"none"|"tel"|"url"|"email"|"numeric"|"decimal" | – | The virtual keyboard hint applied to the slot inputs and hidden validation input. Built-in validation modes provide sensible defaults, but you can override them when needed. |
mask | boolean | false | Whether the slot inputs should mask entered characters. Pass |
name | string | – | Identifies the field when a form is submitted. |
normalizeValue | ((value: string) => string) | – | Function that normalizes the OTP value after whitespace and The returned value is filtered by |
onValueChange | ((value: string, eventDetails: OTPFieldRootChangeEventDetails) => void) | – | Callback fired when the OTP value changes. The
|
onValueComplete | ((value: string, eventDetails: OTPFieldRootCompleteEventDetails) => void) | – | Callback function that is fired when the OTP value becomes complete, or when a complete value is pasted while the OTP is already complete. When the value changes, it runs later than If |
onValueInvalid | ((value: string, eventDetails: OTPFieldRootInvalidEventDetails) => void) | – | Callback fired when entered text contains characters that are rejected by validation or normalization before the OTP value updates. The |
readOnly | boolean | false | Whether the user should be unable to change the field value. |
required | boolean | false | Whether the user must enter a value before submitting a form. |
validationType | "none"|"alpha"|"numeric"|"alphanumeric" | 'numeric' | The type of input validation to apply to the OTP value. |
value | string | – | The OTP value. |
"horizontal"|"vertical" |
'horizontal' |
The orientation of the separator. |