Input OTP
A segmented one-time-passcode input, built on the input-otp library, for confirming sensitive actions.
Enter the code sent to confirm decommissioning eu-west-2.
Install
pnpm dlx shadcn@latest add @namche/input-otpUsage
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp';
<InputOTP maxLength={6} value={value} onChange={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>InputOTP is controlled through value/onChange (a plain string) plus
maxLength for the code length — the visible boxes are declared separately as
InputOTPSlot index={n}, so any grouping or separator layout works, not just
a fixed pattern. Each slot reads its character and caret state from
input-otp's context, and InputOTPGroup merges the borders between adjacent
slots the same way ButtonGroup does.