Input OTP
Accessible one-time password component with copy-paste functionality.
Shadcn UI
Base UIInstallation
bash
npx shadcn@latest add @redpanda/input-otpbash
pnpm dlx shadcn@latest add @redpanda/input-otpbash
yarn dlx shadcn@latest add @redpanda/input-otpbash
bunx shadcn@latest add @redpanda/input-otpbash
nubx shadcn@latest add @redpanda/input-otpbash
aube dlx shadcn@latest add @redpanda/input-otpWhen to use
Use this decision tree to determine when to use the Input OTP component:
Usage
tsx
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/redpanda-ui/input-otp';tsx
<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
Pattern
Use Base UI’s validationType prop to accept an alphanumeric OTP. The default is numeric.
tsx
<InputOTP maxLength={6} validationType="alphanumeric"> <InputOTPGroup> <InputOTPSlot index={0} /> {/* ... */} </InputOTPGroup></InputOTP>Separator
Use InputOTPSeparator to add a separator between input groups.
tsx
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot,} from "@/components/redpanda-ui/input-otp"
...
<InputOTP maxLength={4}> <InputOTPGroup> <InputOTPSlot index={0} /> <InputOTPSlot index={1} /> </InputOTPGroup> <InputOTPSeparator /> <InputOTPGroup> <InputOTPSlot index={2} /> <InputOTPSlot index={3} /> </InputOTPGroup></InputOTP>Controlled
You can use the value and onChange props to control the input value.
Credits
- We use Base UI OTP Field for the Input OTP component.
- We take our inspiration from Shadcn UI for the input OTP style.