In context
Two-factor authentication code, phone verification with expiry badge, account-recovery backup code, and a long license-key entry split across five groups.
Two-factor authentication
Enter the 6-digit code from your authenticator app.
License key
20-character workspace activation code across five groups.
X
K
C
D
1
1
3
8
2
0
2
6
M
I
H
C
M
O
P
U
Six-digit code
Value: (empty)
<InputOTP maxLength={6} value={value} onChange={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Four-digit PIN
PIN: (empty)
Disabled
An OTP input in disabled state. The entire input is non-interactive and visually dimmed.
<InputOTP maxLength={6} disabled>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Controlled
A controlled OTP input that displays the current value and provides a button to clear it.
Current value: ""
const [value, setValue] = useState('');
<InputOTP maxLength={6} value={value} onChange={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<button onClick={() => setValue('')}>Clear</button>