Input OTP
A segmented one-time-password field with per-cell focus.
Install
npx shadcn add @clearly/input-otpPreview
Live Input OTP component — see usage below.
Usage
import { InputOTP } from "@/components/ui/input-otp"
<InputOTP />Every Clearly component also accepts glass (subtle·medium·strong), specular and className.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxLength | number | — | Total number of OTP characters. |
value | string | — | Controlled code value. |
onChange | (value: string) => void | — | Change callback. |
inputMode | "numeric" | "text" | "numeric" | Keyboard mode. |
containerClassName | string | — | Class applied to the container div. |