Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA one-time code split into readable groups such as 123 456 that is still one input, with pasted 123-456 stripped to digits.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for codes people read from one device and type on another, where grouping lowers errors.
Do not use it for codes shorter than four digits, which are fine in one block.
It builds on input-otp, which the CLI installs for you.
import { OtpGroupedSeparator } from "@/components/otp-grouped-separator"<OtpGroupedSeparator groups={[3, 3]} onComplete={(code) => verify(code)} />| Prop | Type | Default | Description |
|---|---|---|---|
groups | number[] | [3, 3] | Slots per group. |
onComplete | (code: string) => void | - | Called when all slots are filled. |
disabled | boolean | false | Disable the field. |
aria-label ("6-digit code") with autocomplete="one-time-code" and inputmode="numeric".| Key | Action |
|---|---|
| Type digits | moves across the groups |
| Paste | accepts 123-456 and 123 456 |
The pattern ships a Testing Library test (otp-grouped-separator.test.tsx) that covers one labelled input, separators between groups, completing and stripping pasted separators.