Input OTP
Segmented PIN input with sketch slots.
<InputOTP maxLength={6} roughness={1.5}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
</InputOTPGroup>
</InputOTP>CLI install
npx doodleui-react add input-otp
Usage
import { InputOTP, InputOTPGroup, InputOTPSlot } from "doodleui-react";
<InputOTP maxLength={4}>\n <InputOTPGroup>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n </InputOTPGroup>\n</InputOTP>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| maxLength | number | required | Number of OTP slots (input-otp). |
| animate | boolean | true | Draw-in each slot; active slot uses accent stroke. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |