Components
InputOTP
An accessible one-time password input.
InputOTP is built on input-otp. It renders an accessible one-time password input with grouped slots and an optional separator.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/input-otp.jsonUsage
"use client";
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp";
export default function Example() {
return (
<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
</InputOTP>
);
}Examples
Default
With separator
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
InputOTPdata-slot="input-otp" | OTPInputinput-otp |
|
InputOTPGroupdata-slot="input-otp-group" | <div>HTML | — |
InputOTPSlotdata-slot="input-otp-slot" | <div>HTML |
|
InputOTPSeparatordata-slot="input-otp-separator" | <div>HTML | — |
Changelog
Full InputOTP historyLast updated on