OTPInput

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;
    if (value.length === 1) {
      setOtp(otp.map((val, i) => i === index ? value : val));
      if (index < 5) {
        setActiveIndex(index + 1);
      }
    }
  };

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      width: '300px',
      backgroundColor: '#0A0A0A',
      padding: '20px'
    }}>
      {otp.map((val, index) => (
        <input
          key={index}
          type="text"
          value={val}
          onChange={(e) => handleChange(e, index)}
          onFocus={() => setActiveIndex(index)}
          style={{
            width: '40px',
            height: '40px',
            fontSize: '24px',
            textAlign: 'center',
            border: activeIndex === index ? '2px solid #C9A84C' : '2px solid #F5F5F0',
            backgroundColor: '#0A0A0A',
            color: '#F5F5F0'
          }}
          maxLength={1}
        />
      ))}
    </div>
  );
};

export default OTPInput;

Component info

Dependencies

About

A 6-digit OTP code input component with auto-advancement and gold active border, built with React and TypeScript, featuring a dark #0A0A0A background. This component is designed to provide a seamless user experience for entering one-time passwords. With its sleek design and intuitive functionality, it is perfect for various applications that require secure authentication. The auto-advancement feature allows users to quickly enter the OTP code without having to manually switch between input fields. The gold active border adds a touch of elegance and sophistication to the component, making it stand out in any application. Whether you are building a banking app, a social media platform, or an e-commerce website, this OTPInput component is a great choice for enhancing the security and user experience of your application.