OtpInput

Use the OtpInput component from Pol-ui to provide a one time password input that provides a single input as different squares.

Importation

Import the component from pol-ui to use the Tooltip element:

import { OtpInput } from "pol-ui";

Default OtpInput

import { OtpInput, toast } from "pol-ui";
export const OtpInputComponent = () => {
  const [otp, setOtp] = useState("");
 
  return (
    <OtpInput
      value={otp}
      onChange={setOtp}
      onComplete={(code: string) => {
        toast({
          title: `You typed ${code}`,
        });
      }}
    />
  );
};

Props

Tooltip

| Prop name | Type | Default | Description | | --------------- | ------------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------- | --- | | value | string | "" | Value of the OTP input | | length | number | 4 | Number of OTP inputs to be rendered | | onChange | (otp: string) => void | - | Callback to be called when the OTP value changes | | onPaste | ((event: ClipboardEvent) => void) | - | Callback to be called when pasting content into the component | | shouldAutoFocus | boolean | false | Whether the first input should be auto focused | | placeholder | string | - | Placeholder for the inputs | | renderSeparator | ReactNode | ((index: number) => ReactNode) | - | | type | "number" | "text" | "tel" | "password" | "OtpValidTypes.number" | "number" | The type that will be passed to the input being rendered | | inputsClassName | string | - | Classname for the inputs | | onComplete | ((otp: string) => void) | - | Callback to be called when the OTP is complete | | theme | Theme | | | - |

Examples

Example of usecase

The common use case for the OtpInput is to provide a one time password input for a form with a multiple digit code.

export function Example() {
  const [step, setStep] = useState(1);
  const [otp, setOtp] = useState("");
  useEffect(() => {
    setOtp("");
  }, [step]);
 
  return (
    <>
      {step === 1 && (
        <Card>
          <h1>Step 1</h1>
          <Button
            onClick={() => {
              toast({
                title: "Your code is 1234",
              });
              setStep(2);
            }}
          >
            Get a code
          </Button>
        </Card>
      )}
 
      {step === 2 && (
        <Card>
          <h1>Step 2</h1>
          <OtpInput
            value={otp}
            onChange={setOtp}
            onComplete={(code: string) => {
              if (code === "1234") {
                setStep(3);
              } else {
                toast({
                  title: "Invalid code",
                  type: "error",
                });
              }
            }}
          />
        </Card>
      )}
      {step === 3 && (
        <Card>
          <h1>Account verfied!</h1>
          <Button onClick={() => setStep(1)}>Reset</Button>
        </Card>
      )}
    </>
  );
}

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface OtpInputTheme {
  base: string;
  input: string;
  selected: string;
  unselected: string;
}