MUI OTP Input Field

An OTP input based on React library MUI

Installation

// with npm
npm install mui-otp-input-field@latest

Usage

import { useState } from "react";
import { MuiOtp } from "mui-otp-input-field";

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

  const handleChange = (newValue) => {
    setOtp(newValue);
  };

  return <MuiOtp value={otp} onChange={handleChange} />;
};

API Reference ( Props to the MuiOtp Component )

Name	Type	Required	Default Value	Description
length	number	true	none	Indicates the no.of input boxes to be rendered.
value	string	optional	""	A value to initialize the MuiOtp component. This is optional because the container component maintains a state for the inputs.
onChange	function	optional	none	Called every time input changes.
onComplete	function	optional	none	Called when the otp length satifies the provided length.
seperator	ReactNode	optional	none	A React component to render between the inputs.
type	InputTypes	optional	text	Traditional input types. This includes "text","number" and "password".
enableFocus	boolean	optional	true	Allows auto focus of the next input when entered value in previous one.
MuiTextFieldProps	MuiTextFieldProps	optional	textAlign="center"	The props to the underlying MuiTextField.
containerStyles	CSSProperties	optional	display:"flex", gap:"4px" ,alignItems:"center"	The styles to the container encapsulating the input fields.

Hooks

Note: These hooks are used for internal purposes. External usage of this may lead to unexpected behaviour. Its highly suggested to turn off the enableFocus in the MuiOtp component before using these hooks.

useFocus

Returns a function named focus, to handle the focusing of the inputs based on index.

useInitialFocus

Used to focus the first input on load.

Note:Default selector for these hooks is "otp-container"

Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

Feature Requests

Please raise an issue for any feature requests.

LICENSE

MIT