OTPField

One-time password field that renders individual character boxes. Supports numeric, alphanumeric, and alphabetic input modes. Integrates with DashForm automatically.

Quick Start

import { DashForm } from '@dashforge/forms';
import { OTPField } from '@dashforge/ui';

function VerifyForm() {
  return (
    <DashForm onSubmit={(data) => console.log(data)}>
      <OTPField
        name="otp"
        label="Verification Code"
        length={6}
        onComplete={(value) => console.log('Code entered:', value)}
        rules={{ required: 'Code is required' }}
      />
    </DashForm>
  );
}

Examples

Six numeric slots bound to the form by name. The form stores a single concatenated string (e.g. "123456"); paste a full code into the first slot and it distributes across all slots.

<OTPField name="code" label="Verification code" length={6} />

mode="alphanumeric" accepts letters and digits. The default is "numeric"; "alpha" accepts letters only.

<OTPField name="code" label="Alphanumeric code" mode="alphanumeric" length={6} />

length controls how many slots render — here a 4-digit PIN.

<OTPField name="pin" label="PIN" length={4} />

Error state with helper text — in a real form this is driven by validation or a rejected server response.

<OTPField
  name="code"
  label="Verification code"
  error
  helperText="Invalid code. Please try again."
/>

API

Notes

• Focus automatically advances to the next box as the user types.
• Paste support is built-in — pasting a full code populates all boxes at once.
• Use onComplete for real-time verification flows (e.g. submitting as soon as the last digit is entered).

Capabilities

OTPField supports progressive adoption — use it as a controlled component with an onComplete callback, integrate with React Hook Form, or conditionally show it based on other form state.

Controlled

Available Now

Works as a standard React controlled component with value and onChange. No proprietary lock-in — use familiar patterns for OTP entry.

• Standard value and onChange props (string-based)
• Integrate with any state management solution
• onComplete callback for submission triggers

const [otp, setOtp] = useState('');

<OTPField
  name="otp"
  length={6}
  value={otp}
  onChange={setOtp}
  onComplete={(value) => submitCode(value)}
/>

React Hook Form Ready

Integration-Friendly

Integrates with React Hook Form via DashForm. Automatic validation, error handling, and touch tracking for OTP fields.

• Works with RHF through DashFormBridge Changed in 0.2.0-beta
• Automatic validation and error gating
• Touch state managed automatically on blur

<DashForm>
  <OTPField
    name="otp"
    length={6}
    rules={{
      required: 'Verification code is required',
      minLength: {
        value: 6,
        message: 'Code must be 6 digits',
      },
    }}
  />
</DashForm>

Reactive Visibility

Available Now

Conditional rendering via visibleWhen. Show OTP field only when needed based on form state, like after phone number entry.

• Conditional rendering via visibleWhen
• Engine evaluates the predicate reactively
• Perfect for multi-step verification flows

<OTPField
  name="otp"
  length={6}
  visibleWhen={(engine) =>
    engine.getNode('phoneNumber')?.value?.length === 10
  }
/>