@racg211/mui-otp-input

A customizable One-Time Password (OTP) input component built with Material UI, compatible with React Hook Form and fully theme-aware.

✨ Features

• Fully styled with Material UI
• Compatible with React Hook Form (v7)
• Customizable dimensions, colors, and typography
• Accessible (with aria-* support)
• Supports error, helperText, and external form validation

📦 Installation

npm install @racg211/mui-otp-input

⚠️ Make sure your app uses a compatible React version:

"react": "^18.0.0 || ^19.0.0"

Your project must not install multiple versions of React. Check using:

npm ls react

🔧 Usage

✅ Standalone

import React, { useState } from "react";
import { InputOTP } from "@racg211/mui-otp-input";

export const OTPStandalone = () => {
  const [otp, setOtp] = useState("");

  return (
    <form onSubmit={() => alert(`Submitted: ${otp}`)}>
      <InputOTP
        length={6}
        value={otp}
        onChange={setOtp}
        error={otp.length < 6}
        errorMessage="Please enter all digits"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

✅ With React Hook Form

import React from "react";
import { useForm } from "react-hook-form";
import { InputOTP } from "@racg211/mui-otp-input";

export const OTPWithRHF = () => {
  const { register, handleSubmit, watch, setValue } = useForm({
    defaultValues: { code: "" },
  });

  const code = watch("code");

  return (
    <form onSubmit={handleSubmit((data) => alert(`Verified: ${data.code}`))}>
      <InputOTP
        length={6}
        value={code}
        onChange={(val) => setValue("code", val)}
        register={register}
        name="code"
        validation={{ required: "OTP is required", minLength: 6 }}
      />
      <button type="submit">Verify</button>
    </form>
  );
};

🎨 Customization Props

| Prop | Type | Default | Description | | ------------------ | ------------------------- | ------------------------------ | -------------------- | | length | number | 6 | Number of OTP digits | | value | string | — | OTP value | | onChange | (value: string) => void | — | Updates OTP value | | error | boolean | false | Shows error styles | | errorMessage | string | Invalid OTP | Error text displayed | | inputHeight | number | 56 | Input height | | inputWidth | number | 40 | Input width | | fontSize | string \| number | theme.h5.fontSize | Text size | | fontFamily | string | theme.h6.fontFamily | Font style | | textColor | string | theme.palette.text.primary | Input color | | borderColor | string | theme.palette.grey[400] | Border color | | focusBorderColor | string | theme.palette.secondary.main | Focused border |

🧠 Compatibility Notes

• ✅ Works with React 18 and 19
• ❌ Does not support mixed React versions — ensure only one version is used
• 🧪 Always run npm ls react in your app to confirm compatibility

📄 License

MIT — by Roberto Carrasquel