Browse components
Input OTP
One-time-code field: slots that pop each digit in, a blinking caret, paste and SMS autofill, a wave on completion and a shake on error.
Installation
npx shadcn@latest add @glint-ui/input-otpFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/input-otp.json
Usage
import { InputOtp } from "@/components/ui/input-otp";
<InputOTP length={6} onComplete={(code) => verify(code)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of slots. |
| groupSize | number | 3 | Separator after every N slots (0 = none). |
| allow | "numeric" | "alphanumeric" | "numeric" | Accepted characters; others are dropped, including from pasted text. |
| invalid | boolean | false | Error look with a shake. |
| disabled | boolean | false | Disable the field. |
| value | ReactNode | — | Controlled value (with onChange). |
| onComplete | ReactNode | — | Called with the code once every slot is filled. |
| className | string | — | Extra classes for the root element. |