An OTP input based on React library MUI
// with npm
npm install mui-otp-input-field@latest
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} />;
};| 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. |
Note:Default selector for these hooks is "otp-container"
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please raise an issue for any feature requests.
MIT