One-Time Password Field component description
A group of single-character text inputs to handle one-time password verification.
Radix Primitives · all subjects
one-time-password-field
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
One-Time Password Field features
The component provides: keyboard navigation mimicking the behavior of a single input field, overriding values on paste, password manager autofill support, input validation for numeric and alphanumeric values, auto-submit on completion, and a hidden input to provide a single value to form data.
One-Time Password Field anatomy
The component consists of OneTimePasswordField.Root (contains all parts), OneTimePasswordField.Input (one for each character of the value), and OneTimePasswordField.HiddenInput (single input to store the full value).
OneTimePasswordField.Root props
asChild (boolean, default false): Change the default rendered element for the one passed as a child, merging their props and behavior. autoComplete (enum: "off" | "one-time-code", default "one-time-code"): Specifies what—if any—permission the user agent has to provide automated assistance in filling out form field values. autoFocus (boolean): Whether or not the first fillable input should be focused on page-load. value (string): The controlled value of the field. Must be used in conjunction with onValueChange. defaultValue (string): The value of the field when initially rendered. Use when you do not need to control the state of the field. onValueChange (function): Event handler called when the value of the field changes. autoSubmit (boolean, default false): Whether the component should attempt to automatically submit when all fields are filled. onAutoSubmit (function): When autoSubmit prop is set to true, this callback will be fired before attempting to submit the associated form. disabled (boolean, default false): Whether or not the field's input elements are disabled. dir (enum: "ltr" | "rtl", default "ltr"): The reading direction of the field when applicable. orientation (enum: "horizontal" | "vertical", default "vertical"): The vertical orientation of the input elements. form (string): A string specifying the form element with which the input is associated. name (string): A string specifying a name for the input control. placeholder (string): Defines the text displayed in a form control when the control has no value. Split into single-character placeholders for each Input rendered. readOnly (boolean, default false): Whether or not the input elements can be updated by the user. sanitizeValue (function): Function for custom sanitization when validationType is set to "none". type (enum: "text" | "password", default "text"): The input type of the field's input elements. validationType (enum: "none" | "numeric" | "alpha" | "alphanumeric", default "numeric"): Specifies the type of input validation to be used.
OneTimePasswordField.Root data attributes
[data-orientation] attribute has values: vertical, horizontal.
OneTimePasswordField.Input component
Renders a text input representing a single character in the value.
OneTimePasswordField.Input data attributes
[data-index] attribute contains the index corresponding with the index of the character relative to the root field value.
OneTimePasswordField.HiddenInput props
asChild (boolean, default false): Change the default rendered element for the one passed as a child, merging their props and behavior.
One-Time Password Field basic usage example
```jsx <OneTimePasswordField.Root> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.HiddenInput /> </OneTimePasswordField.Root> ``` This renders a field with 6 inputs for use with 6-character passwords. Render an Input component for each character of accepted password's length.
One-Time Password Field with segmented controls example
```jsx <OneTimePasswordField.Root> <OneTimePasswordField.Input /> <Separator.Root aria-hidden /> <OneTimePasswordField.Input /> <Separator.Root aria-hidden /> <OneTimePasswordField.Input /> <Separator.Root aria-hidden /> <OneTimePasswordField.Input /> <OneTimePasswordField.HiddenInput /> </OneTimePasswordField.Root> ``` Rendering a visually segmented list is achieved by rendering separators between inputs. Decorative elements should be hidden from assistive tech with aria-hidden. Avoid rendering other meaningful content within Root since each child element is expected to belong to the parent with the group role.
One-Time Password Field auto-submit form example
```jsx function Verify({ validCode }) { const PASSWORD_LENGTH = 6; function handleSubmit(event) { event.preventDefault(); const formData = event.formData; if (formData.get("otp") === validCode) { redirect("/authenticated"); } else { window.alert("Invalid code"); } } return ( <form onSubmit={handleSubmit}> <OneTimePasswordField.Root name="otp" autoSubmit> {PASSWORD_LENGTH.map((_, i) => ( <OneTimePasswordField.Input key={i} /> ))} {/* HiddenInput is required for the form to have data associated with the field */} <OneTimePasswordField.HiddenInput /> </OneTimePasswordField.Root> <button>Submit</button> </form> ); } ``` This example shows how to use the autoSubmit prop to submit an associated form when all inputs are filled.
One-Time Password Field controlled value example
```jsx function Verify({ validCode }) { const [value, setValue] = React.useState(""); const PASSWORD_LENGTH = 6; function handleSubmit() { if (value === validCode) { redirect("/authenticated"); } else { window.alert("Invalid code"); } } return ( <OneTimePasswordField.Root autoSubmit value={value} onAutoSubmit={handleSubmit} onValueChange={setValue} > {PASSWORD_LENGTH.map((_, i) => ( <OneTimePasswordField.Input key={i} /> ))} </OneTimePasswordField.Root> ); } ``` This example shows how to use controlled value with the OneTimePasswordField component.
One-Time Password Field accessibility implementation
The component is implemented as input elements within a container with a role of group to indicate that child inputs are related. Inputs can be navigated and focused using direction keys, and typing input will move focus to the next input until the last input is reached. Pasting a value into the field will replace the contents of all inputs, regardless of the currently focused input.
One-Time Password Field keyboard interactions
Enter: Attempts to submit an associated form if one is found. Tab: Moves focus to the next focusable element outside of the Root. Shift + Tab: Moves focus to the previous focusable element outside of the Root. ArrowDown: Moves focus to the next Input when orientation is vertical. ArrowUp: Moves focus to the previous Input when orientation is vertical. ArrowRight: Moves focus to the next Input when orientation is horizontal. ArrowLeft: Moves focus to the previous Input when orientation is horizontal. Home: Moves focus to the first Input. End: Moves focus to the last Input. Delete: Removes the character in the currently focused Input and shifts later values back. Backspace: Removes the character in the currently focused Input and moves focus to the previous Input. Command + Backspace: Clears the value of all Input elements.
One-Time Password Field legacy clipboard format pasting
Fixed pasting in One-Time Password Field environments that do not support the legacy "Text" clipboard format by reading the pasted value as "text/plain".
One-Time Password Field focus management React 19.2
Fixed issues with focus management in One-Time Password Field in React 19.2+.
One-Time Password Field pasted values exceeding length
Ensured that pasted values exceeding the One-Time Password Field length are truncated.
One-Time Password Field all inputs disabled
Fixed a bug so that all input elements are disabled when the Root component is disabled.
One-Time Password Field iOS Chrome autocomplete
Fixed a bug with iOS Chrome autocomplete in One-Time Password Field.
OneTimePasswordField new primitive April 2025
A brand new unstable primitive OneTimePasswordField was introduced in April 2025. This group of components are designed to implement a common design pattern for one-time password fields displayed as separate input fields for each character. The primitive handles keyboard navigation mimicking the behavior of a single input field, overriding values on paste, password manager autofill support, input validation for numeric and alphanumeric values, auto-submit on completion, focus management, and hidden input to provide a single value to form data. The API is currently unstable and must be imported using the unstable_ prefix.
OneTimePasswordField example
Example of unstable OneTimePasswordField usage: import { unstable_OneTimePasswordField as OneTimePasswordField } from "radix-ui"; export function Verify() { return ( <OneTimePasswordField.Root> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.Input /> <OneTimePasswordField.HiddenInput /> </OneTimePasswordField.Root> ); }