Loading...
Loading...
> A one-time password input component with individual character slots and automatic focus management.
1<InputOTP maxLength={4} value={value} onChange={setValue}>2 <InputOTPGroup>3 <InputOTPSlot index={0} />4 <InputOTPSlot index={1} />5 <InputOTPSlot index={2} />6 <InputOTPSlot index={3} />7 </InputOTPGroup>8</InputOTP>
1<InputOTP maxLength={6} value={sixDigit} onChange={setSixDigit}>2 <InputOTPGroup>3 <InputOTPSlot index={0} />4 <InputOTPSlot index={1} />5 <InputOTPSlot index={2} />6 <InputOTPSlot index={3} />7 <InputOTPSlot index={4} />8 <InputOTPSlot index={5} />9 </InputOTPGroup>10</InputOTP>
1<InputOTP maxLength={6} value={phoneCode} onChange={setPhoneCode}>2 <InputOTPGroup>3 <InputOTPSlot index={0} />4 <InputOTPSlot index={1} />5 <InputOTPSlot index={2} />6 </InputOTPGroup>7 <InputOTPSeparator />8 <InputOTPGroup>9 <InputOTPSlot index={3} />10 <InputOTPSlot index={4} />11 <InputOTPSlot index={5} />12 </InputOTPGroup>13</InputOTP>
1<InputOTP maxLength={4} value="1234" disabled>2 <InputOTPGroup>3 <InputOTPSlot index={0} />4 <InputOTPSlot index={1} />5 <InputOTPSlot index={2} />6 <InputOTPSlot index={3} />7 </InputOTPGroup>8</InputOTP>
1<InputOTP maxLength={8} value={value} onChange={setValue}>2 <InputOTPGroup>3 <InputOTPSlot index={0} />4 <InputOTPSlot index={1} />5 <InputOTPSlot index={2} />6 <InputOTPSlot index={3} />7 </InputOTPGroup>8 <InputOTPSeparator />9 <InputOTPGroup>10 <InputOTPSlot index={4} />11 <InputOTPSlot index={5} />12 <InputOTPSlot index={6} />13 <InputOTPSlot index={7} />14 </InputOTPGroup>15</InputOTP>
| Prop | Type | Default | Description |
|---|---|---|---|
| maxLength | number | - | Maximum number of characters (required) |
| value | string | - | The controlled value of the input |
| onChange | (value: string) => void | - | Callback when the value changes |
| disabled | boolean | - | Disable the input |
| containerClassName | string | - | Additional classes for the container |