Input OTP
An input for entering one-time passcodes, split across individual character slots.
$
Registry itembunx shadcn@latest add @nx-ui/input-otpInstalls withutils
Used byauth-recovery
Controlled, six digits
Drive `value` and `onChange` yourself. Useful for gating a submit action or mirroring the code elsewhere on the page.
0 of 6 digits entered
Grouped slots
Split slots into groups with InputOTPSeparator for longer codes, such as a six-digit site access PIN.
States
Disabled blocks entry entirely; aria-invalid on the group draws the destructive ring for a failed verification.
4
8
2
1
1
9
Composition: verify site access code
An OTP field wired into a Field/FieldLabel layout, confirming a haulier's one-time code before releasing a gate PIN for Hartfield Composting Site.
API reference
Exported parts and their props, extracted from the component source.