A OTP verification input fields

[lokeshvasnik]

What if we create a otp verification input fields. Where the user get to type in the input box the otp.

A otp input component

Reference Image :-

[DebanjanT]

Shadcn OTP React Input | Debanjan Tewary | Full Stack Niraj

ShadcnOTP.mp4

A Shadcn OTP input re-usable react component. This is a preview of the component in imgur: Stackblitz Preview

How To Use:

1. Go to the repo file: https://github.com/DebanjanT/shadcn-otp/blob/main/otp.tsx & copy the code.
2. Create an ui component called otp.tsx inside shadcn components folder /components/ui. Full path will be /components/ui/otp.tsx.
3. View this repo file https://github.com/DebanjanT/shadcn-otp/blob/main/home.tsx for the basic usage of <Otp /> component.

[DebanjanT]

@Jamison1 It is currently not possible from my implementation. That you have do it yourself. I have coded that component as per my type of use case. I will love to see if you do that and share.

[Jamison1]

Unfortunately, I haven't been able to get it to work yet with the react-hook-form 'Form' and 'Input' components.

I didn't copy the errors but IIRC it related to a slot error with FormControl and a forwardRef error with Input?

I think it needs a forwardRef like this

const Otp = forwardRef<HTMLInputElement, OtpInputProps>((props, ref) => {
  let { otp, length, onOtpChange } = props

Perhaps something like the forwardRef in this shadcn tag input component

Not sure how to get the field value to pass with onSubmit though. Field is undefined

If I set a defaultValue that solves the undefined issue but field.value never updates based on input and returns the defaultValue.

Actually this OTP RCI method seems the ideal way to go without the multi-input hacks

RCI demo

The attempt with Radix-ui/Auth seems to have stalled for now also.

[Nicolas-Moises]

Hey guys. I've tried implement this with setValue from react hook form, but i got a ref error. The error was showed only in the console, but the core of functionality still working.

[Jamison1]

Using a mock api and modifying handleOtpChange I have a successful response but getting a type number undefined error with setOtp.

I'm not done testing it but the entire component may need to be rewritten along the lines of the tag component

className issues as well. Not sure yet if this is due to multiple Inputs. May need to use className={cn( to get that to work.

It is surprising that there isnt a shadcn component for OTP that works with or without react-hook-form.

[mykytaui]

What about guys with mobile devices?
It's impossible to paste 6 digit code via Google Authenticator, this component will always type only the last symbol I guess 👀

[lokeshvasnik]

You guys made it??

[mykytaui]

yeap, just use Controller component

[simon-v-swyftx]

@mykytaui was there anything else required to get it to work? I imagine the implementation is different to the RCI demo?

[damianricobelli]

Hey guys, I'm going to try to accomplish these points that you name in this discussion within this PR that I launched yesterday. It would be interesting to be able to solve the FormControl point. What do you think?

#2428

[Jamison1]

RCI is what I implemented. provides feedback for incorrect OTP. Had issues with RHF on the other one.

RCI Demo RCI has several NPM packages that you can import or you could incorporate the packages into the project without installing the external NPM packages. One drawback is the lack of documentation on how to put it all together.

[damianricobelli]

I understand. If you want I can work in the PR to see if I can have a better behavior on this component with what I bring

[damianricobelli]

Hey guys, can you check my PR? I have documented many examples and even its simple use with the Form component of shadcn

I hope the PR meets all your expectations

#2428

[wilfreud]

Official component dropped:
https://ui.shadcn.com/docs/components/input-otp

[lokeshvasnik]

Well done ✅

[immdraselkhan]

Here is a custom OTP field component with better control and without using any packages.

import { useFormContext } from "react-hook-form";
import { Box } from "@/components/ui/box";
import {
  FormField,
  FormItem,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { formatOtp } from "@/utils/formation";
import { useState, useRef, KeyboardEvent } from "react";

type OtpFieldProps = { length?: number; description?: string | JSX.Element };

export function OtpField({ length = 6, description }: OtpFieldProps) {
  const { control, setValue, getFieldState } = useFormContext();

  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);

  const handleChange = (index: number, value: string) => {
    const newOtp = [...otp];
    newOtp[index] = value.slice(-1);
    setOtp(newOtp);
    setValue("otp", newOtp.join(""));

    if (value && index < length - 1) {
      inputsRef.current[index + 1]?.focus();
      inputsRef.current[index + 1]?.select();
    }
  };

  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    const otp = formatOtp(e.clipboardData.getData("text").slice(0, length));
    const newOtp = otp.split("").concat(Array(length - otp.length).fill(""));
    setOtp(newOtp);
    setValue("otp", newOtp.join(""));

    const emptyIndex = newOtp.findIndex((value) => value === "");
    inputsRef.current[emptyIndex !== -1 ? emptyIndex : length - 1]?.focus();
  };

  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Backspace" || e.key === "Delete") {
      const newOtp = [...otp];
      if (newOtp[index]) {
        newOtp[index] = "";
      } else if (index > 0) {
        newOtp[index - 1] = "";
        inputsRef.current[index - 1]?.focus();
      }
      setOtp(newOtp);
      setValue("otp", newOtp.join(""));
    }
  };

  const handleClick = (index: number) => {
    const input = inputsRef.current[index];
    if (input) {
      if (!document.getSelection()?.toString()) {
        input.select();
      }
    }
  };

  return (
    <FormField
      control={control}
      name="otp"
      render={({ field }) => (
        <FormItem>
          <FormControl>
            <Box className="mx-auto flex justify-center space-x-2">
              {otp.map((_, index) => (
                <Input
                  {...field}
                  key={index}
                  autoComplete="on"
                  inputMode="numeric"
                  ref={(el) => {
                    inputsRef.current[index] = el;
                  }}
                  autoFocus={
                    field.value.length ===
                    (index === 0 ? 0 : index === length - 1 ? length : index)
                  }
                  value={otp[index] || ""}
                  onChange={(e) =>
                    handleChange(index, formatOtp(e.target.value) ?? "")
                  }
                  onPaste={handlePaste}
                  onKeyDown={(e) => handleKeyDown(index, e)}
                  onClick={() => handleClick(index)}
                  className={`h-10 w-10 rounded border text-center ${getFieldState("otp").error && "text-destructive"}`}
                />
              ))}
            </Box>
          </FormControl>
          <FormMessage className="text-center" />
          {description && <FormDescription>{description}</FormDescription>}
        </FormItem>
      )}
    />
  );
}