One-Time Password Field

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

npm install @radix-ui/react-one-time-password-field

Anatomy

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.

string

The controlled value of the OTP field.

string

The value when initially rendered (uncontrolled).

(value: string) => void

Event handler called when the value changes.

(value: string) => void

Event handler called when all inputs are filled.

number

default:"6"

The maximum number of characters for the OTP.

string

A regex pattern to validate each character. Examples: [0-9] for digits only, [a-zA-Z0-9] for alphanumeric.

'text' | 'numeric'

default:"'text'"

The input mode for mobile keyboards.

string

The name of the field. Submitted with its owning form as part of a name/value pair.

boolean

When true, prevents the user from interacting with the field.

boolean

When true, indicates that the user must fill the field before submitting the form.

'ltr' | 'rtl'

The reading direction. If omitted, inherits from the parent.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Input

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

number

required

The index of this input in the sequence (0-based).

boolean

default:"false"

Change the default rendered element for the one passed as a child.

HiddenInput

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

Example

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>
);

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>
);

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>
  );
};

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>
);

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>
);

Accessibility

The component automatically manages focus and provides proper ARIA labels for screen readers.

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

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

Input

HiddenInput

Example

Accessibility

Keyboard Interactions

Features

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​Input

​HiddenInput

​Example

​Accessibility

​Keyboard Interactions

​Features

Overview

Features

Installation

Anatomy

API Reference

Root

Input

HiddenInput

Example

Accessibility

Keyboard Interactions

Features