Command Menu

Search documentation, components, and switch theme.

Atoms

Input OTP

One-time password input with individual slots.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/input-otp

Install the following dependencies:

npm install input-otp lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Examples#

With Separator#

Pattern#

Allow digits and characters with a custom pattern.