OTP Input

The RhOTPInput is a customizable input field for users to enter a One-Time Password (OTP). With the mentioned props developers can customize the input field according to their application's needs.

Usage

Once installed, you can import the RhOTPInput component into your React application:

copy

import {RhOTPInput} from "@rhythm-ui/react"

Then, you can use the RhOTPInput component in your JSX code:

copy

function Default() {
  const [OTP, setOTP] = useState("");

  return (
    <RhOTPInput length={6} value={OTP} onChange={(value) => setOTP(value)} />
  );
}

OTP Input Props

Name	Type	Default	Description
value	string		OTP value
length	number		Length of the string
error	boolean	false	To be given true When the wrong OTP is entered
errorMessage	string		Error message to show below input when OTP is wrong
autoFocus	boolean		First OTP input box will be focused if autoFocus is true
onChange	(value: string) => void		Change event will fire when value is changed
className	string		ClassName to give custom classes

Auto Focus

The autoFocus sets the focus on the input field when the component is rendered.

copy

function Default() {
  const [OTP, setOTP] = useState("");

  return (
    <RhOTPInput
      autoFocus
      length={6}
      value={OTP}
      onChange={(value) => setOTP(value)}
    />
  );
}

Error

The error and errorMessage props are there to display an error message if the entered OTP is incorrect,

copy

function Default() {
  const [OTP, setOTP] = useState("");

  return (
    <RhOTPInput
      length={6}
      value={OTP}
      onChange={(value) => setOTP(value)}
      error={true}
      errorMessage="Wrong One Time Password"
    />
  );
}