shadcn.io is an independent project built on shadcn/ui
Six boxes in two groups of three, with a separator between them. Nothing else is on the page: no label, no button, and no message.
Use this shape when the code arrives as two groups, like 123-456. A single Input is simpler when people paste one long string. In Svelte, Ark UI moves to the next box as you type.
Installation
Anatomy
Usage
<InputOTP><InputOTPGroup><InputOTPSlot class="bg-background" index={0} /><InputOTPSlot class="bg-background" index={1} /><InputOTPSlot class="bg-background" index={2} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot class="bg-background" index={3} /><InputOTPSlot class="bg-background" index={4} /><InputOTPSlot class="bg-background" index={5} /></InputOTPGroup></InputOTP>FAQ
How are the two groups made?
Each InputOTPGroup joins its slots into one block, and InputOTPSeparator draws a minus between blocks. The separator isn't a character, and index counts straight through the groups, 0 to 5.
How does focus move between the boxes?
Typing a character fills the current box and moves to the next; Backspace clears and moves back, and the arrow keys move between boxes. Pasting a full code fills them all at once.
Does it accept letters?
No. The default type is numeric, so only digits are accepted; set type to alphanumeric for letters too.
API Reference
Input OTP
Sets index={0}, index={1}, index={2}, index={3}, index={4} and index={5}. The rest is on the Input OTP page.
