Input OTPs

Forms 1

About

Here is Input OTP component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Input OTPs to your project and fits it to your theme.

Code

How Input OTPs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useId } from 'react'

import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
import { Label } from '@/components/ui/label'

const InputOTPWithResendDemo = () => {
  const id = useId()

  return (
    <div className='space-y-3'>
      <Label htmlFor={id}>Input OTP with resend</Label>
      <InputOTP id={id} maxLength={4}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
        </InputOTPGroup>
      </InputOTP>
      <p className='text-muted-foreground text-xs'>
        Didn&apos;t get the code?{' '}
        <a href='#' className='text-primary hover:underline'>
          Resend code
        </a>
      </p>
    </div>
  )
}

export default InputOTPWithResendDemo