input-otp

If you are using shadcn/ui, you can add the pre-composed input-otp component which wraps the core library and uses <InputOTPSlot /> instead of a render prop.

npx shadcn@latest add input-otp

To start the development server for the playground, use one of the following package manager commands. Once running, you can view the playground at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To start the development server for the website project, use one of the following package manager commands. Once running, you can view the site at http://localhost:3000. You can edit app/page.tsx to modify the landing page content.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```埋

Install the input-otp package via npm to use the accessible, unstyled one-time-password component for React.

npm install input-otp

The default cron schedule is 0 0,12 * * * (twice daily). Because Vercel Hobby plans are limited to one cron trigger per day, you must modify vercel.json to use a daily schedule if you are on a Hobby plan:

// vercel.json
{
  "crons": [
    {
      "schedule": "0 0 * * *"
    }
  ]
}

To use OTPInput, specify the maxLength (number of slots) and provide a render function. The render function receives an object containing slots, which you can map over to draw your custom UI. Each slot provides the necessary state to render the character, placeholder, active status, and fake caret.

'use client'
import { OTPInput } from 'input-otp'

export function VerificationCode() {
  return (
    <OTPInput
      maxLength={6}
      containerClassName="group flex items-center"
      render={({ slots }) => (
        <div className="flex">
          {slots.map((slot, idx) => (
            <Slot key={idx} {...slot} />
          ))}
        </div>
      )}
    />
  )
}

The SlotProps object is passed to the render function for each slot and contains the following properties:

• char: string | null - The character in this slot.
• placeholderChar: string | null - The character to show if the slot is empty.
• isActive: boolean - Whether this slot is currently being edited.
• hasFakeCaret: boolean - Whether to show the custom fake caret (the real caret is transparent).

The input-otp library does not render the individual cells of the OTP input. Instead, it provides the state (char, placeholderChar, isActive, and hasFakeCaret) to your custom components. You can use the following sub-components to build your own UI:

• Slot: Represents a single visible cell. It receives props from input-otp to determine what to display and whether to show a fake caret.
• SlotGroup: A wrapper used to group multiple Slot components together (e.g., for creating segmented inputs).
• FakeCaret: A blinking bar component used to simulate a cursor, as the real input caret is typically made transparent in custom OTP implementations.
• FakeDash: A decorative component used to create visual separators (like dashes) between SlotGroup instances.

When providing a render function to the OTP input, you receive RenderProps which contains an array of SlotProps. This allows for complete control over how each character slot is displayed.

interface SlotProps {
  isActive: boolean
  char: string | null
  placeholderChar: string | null
  hasFakeCaret: boolean
}

interface RenderProps {
  slots: SlotProps[]
  isFocused: boolean
  isHovering: boolean
}

type InputOTPRenderFn = (props: RenderProps) => React.ReactNode