Skip Navigation
docs
next page
otp input

Otp Input

A simple validation input for OTP

shadcn-uireact-otp-input

OTP verification

Enter the 5-digit code sent to your email address or phone number

Installation

Run the following command 

pnpm dlx @shadext/cli add otp-input

Usage

import { OtpStyledInput } from "@/components/extension/otp-input";
<OtpStyledInput
  numInputs={5}
  inputType="number"
  value={value}
  onChange={onChange}
/>

Example

Form

"use client";
 
import { OtpStyledInput } from "@/components/extension/otp-input";
 
{...}
 
const OTPInput = ()=>{
  return (
     <Form {...multiForm}>
       {...}
       <FormField
          control={multiForm.control}
          name="otp"
          render={({ field }) => (
            {...}
            <OtpStyledInput
              numInputs={5}
              inputType="number"
              value={field.value}
              onChange={field.onChange}
            />
            {...}
          )} />
        {...}
     </Form>
  )
}