//
A segmented input for one-time passwords and verification codes.
bun add xiod-ui1import {2 InputOtp,3 InputOtpGroup,4 InputOtpInput,5 InputOtpSeparator,6 OTPField,7 OTPFieldGroup,8 OTPFieldInput,9 OTPFieldSeparator10} from "xiod-ui/input-otp";1<InputOtp>2 <InputOtpInput />3 <OTPFieldInput />4 <InputOtpGroup>5 <InputOtpSeparator />6 <OTPField />7 <OTPFieldSeparator />8 </InputOtpGroup>9 <OTPFieldGroup>10 <InputOtpSeparator />11 <OTPField />12 <OTPFieldSeparator />13 </OTPFieldGroup>14</InputOtp>| Prop | Type | Default | Description |
|---|---|---|---|
className | string| undefined | - | |
form | string| undefined | - | A string specifying the `form` element with which the hidden input is associated. This string's value must match the id of a `form` element in the same document. |
style | CSSProperties| ((state: OTPFieldRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
mask | boolean| undefined | false | Whether the slot inputs should mask entered characters. Pass `type` directly to individual `<OTPField.Input>` parts to use a custom input type. |
defaultValue | string| undefined | - | The uncontrolled OTP value when the component is initially rendered. |
id | string| undefined | - | The id of the first input element. Subsequent inputs derive their ids from it (`{id}-2`, `{id}-3`, and so on). |
inputMode | "search"| "text"| "none"| "tel"| "url"| "email"| "numeric"| "decimal"| undefined | - | 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. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, OTPFieldRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
autoComplete | string| undefined | 'one-time-code' | The input autocomplete attribute. Applied to the first slot and hidden validation input. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
name | string| undefined | - | Identifies the field when a form is submitted. |
readOnly | boolean| undefined | false | Whether the user should be unable to change the field value. |
required | boolean| undefined | false | Whether the user must enter a value before submitting a form. |
value | string| undefined | - | The OTP value. |
onValueChange | ((value: string, eventDetails: OTPFieldRootChangeEventDetails) => void)| undefined | - | Callback fired when the OTP value changes. The `eventDetails.reason` indicates what triggered the change: - `'input-change'` for typing or autofill - `'input-clear'` when a character is removed by text input - `'input-paste'` for paste interactions - `'keyboard'` for keyboard interactions that change the value |
lengthReq | number | - | The number of OTP input slots. Required so the root can clamp values, detect completion, and generate consistent validation markup before all slots hydrate. |
autoSubmit | boolean| undefined | false | Whether to submit the owning form when the OTP becomes complete. |
validationType | OTPValidationType| undefined | 'numeric' | The type of input validation to apply to the OTP value. |
normalizeValue | ((value: string) => string)| undefined | - | Function that normalizes the OTP value after whitespace and `validationType` filtering. It runs whenever OTP Field normalizes a value, including initial/default values, controlled values, and user edits. The returned value is filtered by `validationType` again, then clamped to `length`. It should be idempotent because OTP Field may normalize the same value more than once while handling edits, storing state, and rendering controlled or uncontrolled values. Non-idempotent normalizers can compound across those normalization passes. Characters rejected while normalizing typed or pasted text are reported through `onValueInvalid`. |
onValueInvalid | ((value: string, eventDetails: OTPFieldRootInvalidEventDetails) => void)| undefined | - | Callback fired when entered text contains characters that are rejected by validation or normalization before the OTP value updates. The `value` argument is the attempted user-entered string before normalization. |
onValueComplete | ((value: string, eventDetails: OTPFieldRootCompleteEventDetails) => void)| undefined | - | 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 `onValueChange`, after the internal value update is applied. If a complete pasted value matches the current value, `onValueChange` does not fire. If `autoSubmit` is enabled, it runs immediately before the owning form is submitted. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| undefined | - | |
style | CSSProperties| ((state: OTPFieldInputState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OTPFieldInputState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| undefined | - | |
orientation | Orientation| undefined | vertical | The orientation of the separator. |
style | CSSProperties| ((state: SeparatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, SeparatorState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |