Input OTP

1import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "passport-ui";
2import { Label } from "passport-ui";

1<div className="w-sm">
2  <div className="meta-container">
3    <Label>Verification Code</Label>
4    <InputOTP maxLength={6}>
5      <InputOTPGroup>
6        <InputOTPSlot index={0} />
7        <InputOTPSlot index={1} />
8        <InputOTPSlot index={2} />
9      </InputOTPGroup>
10      <InputOTPSeparator />
11      <InputOTPGroup>
12        <InputOTPSlot index={3} />
13        <InputOTPSlot index={4} />
14        <InputOTPSlot index={5} />
15      </InputOTPGroup>
16    </InputOTP>
17  </div>
18</div>
19 
20{/* Simple 4-digit PIN */}
21<InputOTP maxLength={4}>
22  <InputOTPGroup>
23    <InputOTPSlot index={0} />
24    <InputOTPSlot index={1} />
25    <InputOTPSlot index={2} />
26    <InputOTPSlot index={3} />
27  </InputOTPGroup>
28</InputOTP>