Skip to Content
Dashflow Logo

InputOTP Component

A comprehensive guide to using the InputOTP component with examples, props, and best practices.

Overview

The InputOTP component provides a one-time password input interface with individual slots for each digit. It's commonly used for two-factor authentication, verification codes, and secure input fields.

Basic Usage

import { InputOTP } from '@dashflowx/core'


export default function InputOTPExample() {
  return (
    <InputOTP />
  )
}

Preview:

-

Props

PropTypeDefaultDescription
maxLengthnumber6Maximum number of digits
classNamestring''Additional CSS classes for the container

Examples

Basic OTP Input

import { InputOTP } from '@dashflowx/core'


export default function BasicInputOTP() {
  return (
    <InputOTP />
  )
}

Preview:

-

4-Digit OTP

import { InputOTP } from '@dashflowx/core'


export default function FourDigitOTP() {
  return (
    <InputOTP maxLength={4} />
  )
}

Preview:

-

8-Digit OTP

import { InputOTP } from '@dashflowx/core'


export default function EightDigitOTP() {
  return (
    <InputOTP maxLength={8} />
  )
}

Preview:

-

Custom Styled OTP

import { InputOTP } from '@dashflowx/core'


export default function CustomStyledOTP() {
  return (
    <InputOTP 
      maxLength={6}
      className="border-2 border-blue-500 rounded-xl p-4"
    />
  )
}

Preview:

-

Large OTP Input

import { InputOTP } from '@dashflowx/core'


export default function LargeOTP() {
  return (
    <InputOTP 
      maxLength={6}
      className="scale-150"
    />
  )
}

Preview:

-

Common Use Cases

Two-Factor Authentication

const twoFactorAuth = (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold">Enter verification code</h3>
    <p className="text-gray-600">We sent a 6-digit code to your phone</p>
    <InputOTP maxLength={6} />
    <button className="w-full bg-blue-600 text-white py-2 px-4 rounded-md">
      Verify
    </button>
  </div>
);

Email Verification

const emailVerification = (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold">Verify your email</h3>
    <p className="text-gray-600">Enter the 4-digit code sent to your email</p>
    <InputOTP maxLength={4} />
    <button className="w-full bg-green-600 text-white py-2 px-4 rounded-md">
      Confirm
    </button>
  </div>
);

Password Reset

const passwordReset = (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold">Reset your password</h3>
    <p className="text-gray-600">Enter the 8-digit reset code</p>
    <InputOTP maxLength={8} />
    <button className="w-full bg-red-600 text-white py-2 px-4 rounded-md">
      Reset Password
    </button>
  </div>
);

Account Verification

const accountVerification = (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold">Verify your account</h3>
    <p className="text-gray-600">Enter the verification code from your authenticator app</p>
    <InputOTP maxLength={6} />
    <button className="w-full bg-purple-600 text-white py-2 px-4 rounded-md">
      Verify Account
    </button>
  </div>
);

Transaction Confirmation

const transactionConfirmation = (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold">Confirm transaction</h3>
    <p className="text-gray-600">Enter the 6-digit confirmation code</p>
    <InputOTP maxLength={6} />
    <button className="w-full bg-orange-600 text-white py-2 px-4 rounded-md">
      Confirm Transaction
    </button>
  </div>
);

Best Practices

1. Appropriate Length

Use appropriate OTP lengths for different use cases.

// ✅ Good - 6 digits for 2FA
<InputOTP maxLength={6} />


// ✅ Good - 4 digits for email verification
<InputOTP maxLength={4} />


// ❌ Avoid - Too short for security
<InputOTP maxLength={2} />

2. Clear Instructions

Provide clear instructions for users.

// ✅ Good - Clear instructions
<div>
  <p>Enter the 6-digit code sent to your phone</p>
  <InputOTP maxLength={6} />
</div>


// ❌ Avoid - Unclear instructions
<div>
  <p>Enter code</p>
  <InputOTP maxLength={6} />
</div>

3. Consistent Styling

Maintain consistent styling across your application.

// ✅ Good - Consistent styling
<InputOTP className="standard-otp-style" />


// ❌ Avoid - Inconsistent styling
<InputOTP className="random-styles" />

4. Accessibility

Ensure OTP inputs are accessible to all users.

// ✅ Good - Accessible
<InputOTP maxLength={6} />


// ❌ Avoid - Hidden or inaccessible
<InputOTP maxLength={6} className="sr-only" />

5. Error Handling

Provide clear error messages for invalid codes.

// ✅ Good - Error handling
<div>
  <InputOTP maxLength={6} />
  {error && <p className="text-red-500">Invalid code. Please try again.</p>}
</div>

Customization

Custom Styling

You can customize the OTP input appearance using CSS classes:

<InputOTP 
  maxLength={6}
  className="border-2 border-blue-500 rounded-xl p-4"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<InputOTP className="bg-white border-gray-200" />


// Dark theme
<InputOTP className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<InputOTP className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small OTP
<InputOTP className="scale-75" />


// Standard OTP
<InputOTP />


// Large OTP
<InputOTP className="scale-150" />

Advanced Usage

Dynamic Length

Change OTP length based on requirements:

const [otpLength, setOtpLength] = useState(6);


<InputOTP maxLength={otpLength} />

Auto-focus

Automatically focus the first input:

const firstInputRef = useRef(null);


useEffect(() => {
  if (firstInputRef.current) {
    firstInputRef.current.focus();
  }
}, []);

Validation

Implement real-time validation:

const [otpValue, setOtpValue] = useState('');
const [isValid, setIsValid] = useState(false);


const validateOTP = (value) => {
  const isValid = value.length === 6 && /^\d+$/.test(value);
  setIsValid(isValid);
};

Auto-submit

Automatically submit when complete:

const handleOTPComplete = (value) => {
  if (value.length === 6) {
    // Auto-submit
    submitOTP(value);
  }
};
  • Input: For text input fields
  • Form: For form management
  • Button: For submission buttons
  • Alert: For error messages
  • Card: For OTP containers

API Reference

For the complete API reference and advanced usage patterns, see the InputOTP API documentation.

Edit this page on GitHub
previousInput