OtpInput

EOtpInput (a one-time password) is a number or alphanumeric string of characters produced automatically to authenticate a user for a single transaction or login. Demo Here

Import

import EOtpInput from "@components/Form/EOtpInput";

Usage

const OtpInputExample = () => {
    const [value, setValue] = useState("");

    const changeHandler = (newValue) => {
        setValue(newValue);
    };

    return (
        <EOtpInput
            label="Enter the code"
            onChange={changeHandler}
            value={value}
        />
    )
};

export default OtpInputExample;

Props

For EOtpInput component, the following props are available:

Prop	Type	Default	Note
value	String	-	The value of the otp input element.
label	node	-	Component's label
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the EOtpInput.
variant	String	"fill"	The EOtpInput element can be represented in four ways: fill and border.
width	[String, Number]	-	Sets the component's width. Default unit is px.ght.
height	[String, Number]	-	Sets the component's height. Default unit is px.
square	Boolean	false	Squares the corners of the OTP.
message	String	-	Adds a message below the input.
digitsLength	Number	6	Specify the length of the OTP Input.
paste	Boolean	false	Enables the user to paste one output to multiple OTP.
className	String	-	Overrides or extends the component's styles.
name	String	-	HTML name attribute..
validateOn	String	"input"	Triggers validation on @values: submit, input, blur.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
readOnly	Boolean	false	Same as readonly in native OTP makes the element not mutable.
size	String	"md"	The EOtpInput element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Callback Functions

The EInput component contains following callback functions.

Function	Description
onChange	Controls the input. function(event: React.SyntheticEvent, value: String) => void 👇 • event: The event source of the callback. • value: input value.