OTP Code Input

OTP Code Input is a form in the UI HUB forms collection. A segmented OTP input. Users type digits that auto-advance focus to the next box; Backspace on an empty box clears and re-focuses the previous, arrows move focus, and pasting a code fills boxes left-to-right.

The component is driven by 7 documented props (length, value, onChange, autoFocus, disabled, ariaLabel and 1 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: per-digit refs; keyboard navigation; clipboard paste handling.

Preview the form in the browser above, copy the source, and paste it into your project. Forms components in UI HUB are grouped by category so you can compare effects side by side before choosing one.