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.
What is OTP Code Input?
Six-box OTP entry with auto-advance, backspace traversal, arrow keys, and paste support.
OTP Code Input at a glance
- Category
- Forms
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 7
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How OTP Code Input works
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.
Technical information for OTP Code Input
| Category | Forms |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| State change | empty brand-blue next box to filled boxes auto-advancing and glowing |
| Props | 7 configurable |
| Usage example | Not published yet |
What OTP Code Input requires
- per-digit refs
- keyboard navigation
- clipboard paste handling
- controlled/uncontrolled value
- aria labels per box
OTP Code Input questions
What is OTP Code Input?
Six-box OTP entry with auto-advance, backspace traversal, arrow keys, and paste support.
How does OTP Code Input work?
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.
Which category does OTP Code Input belong to?
OTP Code Input is listed under Forms in the UI HUB catalog. Form interface components with considered interaction design: animated focus states, floating labels, input borders that respond to focus and validation, and submit button transitions. These are presentation components, so wire them to your own state and validation logic rather than expecting form behaviour out of the box.
What does the length prop do in OTP Code Input?
Number of digit boxes. It defaults to 6.
What does the value prop do in OTP Code Input?
Controlled value (string of digits). It defaults to undefined.
Is OTP Code Input free to use?
OTP Code Input is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does OTP Code Input use?
OTP Code Input uses React and is styled with Tailwind CSS.
What does OTP Code Input need to run?
OTP Code Input needs per-digit refs, keyboard navigation, clipboard paste handling and controlled/uncontrolled value.