> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.

# One-Time Password Field

> A field for entering one-time passwords or verification codes.

## Overview

One-Time Password Field provides a specialized input component for entering verification codes, typically sent via SMS or email. It breaks the code into individual character inputs for better user experience.

## Features

* Individual character inputs for better visualization
* Automatic focus management
* Full keyboard navigation
* Paste support for complete codes
* Customizable input validation
* Works inside forms
* Accessible by default with proper ARIA attributes

## Installation

```bash theme={null}
npm install @radix-ui/react-one-time-password-field
```

## Anatomy

```jsx theme={null}
import * as OTPField from '@radix-ui/react-one-time-password-field';

export default () => (
  <OTPField.Root>
    <OTPField.Input />
    <OTPField.HiddenInput />
  </OTPField.Root>
);
```

## API Reference

### Root

Contains all the one-time password field parts.

<ParamField path="value" type="string">
  The controlled value of the OTP field.
</ParamField>

<ParamField path="defaultValue" type="string">
  The value when initially rendered (uncontrolled).
</ParamField>

<ParamField path="onValueChange" type="(value: string) => void">
  Event handler called when the value changes.
</ParamField>

<ParamField path="onComplete" type="(value: string) => void">
  Event handler called when all inputs are filled.
</ParamField>

<ParamField path="maxLength" type="number" default="6">
  The maximum number of characters for the OTP.
</ParamField>

<ParamField path="pattern" type="string">
  A regex pattern to validate each character. Examples: `[0-9]` for digits only, `[a-zA-Z0-9]` for alphanumeric.
</ParamField>

<ParamField path="inputType" type="'text' | 'numeric'" default="'text'">
  The input mode for mobile keyboards.
</ParamField>

<ParamField path="name" type="string">
  The name of the field. Submitted with its owning form as part of a name/value pair.
</ParamField>

<ParamField path="disabled" type="boolean">
  When true, prevents the user from interacting with the field.
</ParamField>

<ParamField path="required" type="boolean">
  When true, indicates that the user must fill the field before submitting the form.
</ParamField>

<ParamField path="dir" type="'ltr' | 'rtl'">
  The reading direction. If omitted, inherits from the parent.
</ParamField>

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

### Input

A single character input. Render this multiple times based on your `maxLength`.

<ParamField path="index" type="number" required>
  The index of this input in the sequence (0-based).
</ParamField>

<ParamField path="asChild" type="boolean" default="false">
  Change the default rendered element for the one passed as a child.
</ParamField>

### HiddenInput

A hidden input that contains the complete value for form submission.

## Example

<CodeGroup>
  ```jsx Basic theme={null}
  import * as OTPField from '@radix-ui/react-one-time-password-field';
  import './styles.css';

  export default () => (
    <OTPField.Root className="OTPRoot" maxLength={6}>
      <div style={{ display: 'flex', gap: 8 }}>
        <OTPField.Input className="OTPInput" index={0} />
        <OTPField.Input className="OTPInput" index={1} />
        <OTPField.Input className="OTPInput" index={2} />
        <OTPField.Input className="OTPInput" index={3} />
        <OTPField.Input className="OTPInput" index={4} />
        <OTPField.Input className="OTPInput" index={5} />
      </div>
      <OTPField.HiddenInput />
    </OTPField.Root>
  );
  ```

  ```jsx Numeric Only theme={null}
  import * as OTPField from '@radix-ui/react-one-time-password-field';

  export default () => (
    <OTPField.Root maxLength={4} pattern="[0-9]" inputType="numeric">
      <div style={{ display: 'flex', gap: 8 }}>
        {[0, 1, 2, 3].map((i) => (
          <OTPField.Input key={i} index={i} />
        ))}
      </div>
      <OTPField.HiddenInput />
    </OTPField.Root>
  );
  ```

  ```jsx Controlled theme={null}
  import { useState } from 'react';
  import * as OTPField from '@radix-ui/react-one-time-password-field';

  export default () => {
    const [value, setValue] = useState('');

    return (
      <div>
        <OTPField.Root
          value={value}
          onValueChange={setValue}
          onComplete={(code) => {
            console.log('Complete:', code);
          }}
          maxLength={6}
        >
          <div style={{ display: 'flex', gap: 8 }}>
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <OTPField.Input key={i} index={i} />
            ))}
          </div>
          <OTPField.HiddenInput />
        </OTPField.Root>
        <p>Value: {value}</p>
      </div>
    );
  };
  ```

  ```jsx In Form theme={null}
  import * as OTPField from '@radix-ui/react-one-time-password-field';

  export default () => (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Code:', formData.get('otp'));
      }}
    >
      <label>Enter verification code:</label>
      <OTPField.Root name="otp" maxLength={6} required>
        <div style={{ display: 'flex', gap: 8 }}>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <OTPField.Input key={i} index={i} />
          ))}
        </div>
        <OTPField.HiddenInput />
      </OTPField.Root>
      <button type="submit">Verify</button>
    </form>
  );
  ```

  ```jsx With Separators theme={null}
  import * as OTPField from '@radix-ui/react-one-time-password-field';

  export default () => (
    <OTPField.Root maxLength={6}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <OTPField.Input index={0} />
        <OTPField.Input index={1} />
        <OTPField.Input index={2} />
        <span style={{ fontSize: 24, fontWeight: 'bold' }}>-</span>
        <OTPField.Input index={3} />
        <OTPField.Input index={4} />
        <OTPField.Input index={5} />
      </div>
      <OTPField.HiddenInput />
    </OTPField.Root>
  );
  ```
</CodeGroup>

## Accessibility

<Note>
  The component automatically manages focus and provides proper ARIA labels for screen readers.
</Note>

### Keyboard Interactions

* **ArrowLeft** - Moves focus to the previous input.
* **ArrowRight** - Moves focus to the next input.
* **Backspace** - Deletes the current character and moves focus to the previous input.
* **Delete** - Deletes the current character.
* **Paste** - Pastes clipboard content and fills multiple inputs if applicable.

### Features

* Automatic focus management between inputs
* Auto-advances to next input on character entry
* Auto-moves to previous input on backspace
* Supports pasting complete codes
* Properly labeled for screen readers