Component
OTP Input
One-time-code entry as a row of individually focusable character slots.
Basic
One-time verification code
Digit 1 of 6Digit 2 of 6Digit 3 of 6Digit 4 of 6Digit 5 of 6Digit 6 of 6
- Arrow keys and paste both move focus across the slots correctly
Length
Four slots for a short code, six for the usual authenticator format.
Four-digit code
Digit 1 of 4Digit 2 of 4Digit 3 of 4Digit 4 of 4
Six-digit codeDigit 1 of 6Digit 2 of 6Digit 3 of 6Digit 4 of 6Digit 5 of 6Digit 6 of 6
Sizes
size sets the height of every slot.
Small code
Digit 1 of 4Digit 2 of 4Digit 3 of 4Digit 4 of 4
Medium codeDigit 1 of 4Digit 2 of 4Digit 3 of 4Digit 4 of 4
Large codeDigit 1 of 4Digit 2 of 4Digit 3 of 4Digit 4 of 4
Invalid
The error state paints across every slot - a wrong code, not a wrong digit.
Incorrect code
Digit 1 of 6Digit 2 of 6Digit 3 of 6Digit 4 of 6Digit 5 of 6Digit 6 of 6
API reference
invalidNone
booleanPaints the error state across every cell - a wrong code, not a wrong digit.
size"md"
ComponentSizeHeight of each cell.
Also accepts everything from Omit<React.ComponentPropsWithoutRef<typeof import("@base-ui/react/otp-field").OTPField.Root>, "render">.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent