Components / Forms
Input OTP
A one-time-password input built on Base UI's OTP Field. Renders a row of single-character slots, optionally split into groups.
Installation
bash
npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/input-otp/registry.jsonBasic
InputOTP · 6 slots
tsx
import { InputOTP } from "@/components/ui/input-otp"
<InputOTP length={6} />Grouped
InputOTP · 3 + 3 with separator
tsx
{/* split into two groups of 3 with a separator between */}
<InputOTP length={6} groupSizes={[3, 3]} />InputOTP props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of character slots. |
| groupSizes | number[] | - | Splits slots into groups separated by a dash, e.g. [3, 3]. |
| value | string | - | Controlled value. |
| onValueChange | (value: string) => void | - | Fires as the code is entered. |