a 100% unstyled UI layer (custom to your design system) with pointer-events:none
an overlay layer (native <input />) with pointer-events:all and position:absoluteinset:0.
In short: it's 1 underlying native input as an overlay on top of N layers of render.
However, the core implementation has some limitations. The known limits are:
Visual (UI) limitations
iOS selections are always visible.
PS: iOS copy-paste touch callout menus can't be triggered if the selection is <1px in width.
iOS don't provide a way to style input::selection in CSS, we end up with a non-transparent selection when at least 1 char of the input is selected within the underlying input. I'm applying super negative letter-spacing to ensure the visible selection becomes as thin as possible (=1px) but can't render smaller than 1px otherwise iOS touch callout doesn't pop up.
This would barely go noticed in a normal OTP flow where the user types in an OTP code or autofills it from his password manager. The user wouldn't even notice the selection as developers usually choose to automatically submit the form using <input onComplete prop so there's no time to look at 1px selections.
[Mobile] Firefox shows quote markers in left+right corners of the selection.
TODO: add image
Behavior (UX) limitations
Click/touch/touchmove-to-select slots
The user cannot click/touch/hold-move and select a slot since the native input's letters are shrinked into a ~1px thin width due to added CSS letter-spacing:-.5em, resulting in all characters being a ultra thin condensed area. Unfortunately, the user cannot manually choose his selection by mouse/touch, only by keyboard.
How the library works (fundamentals)
input-otp
is an accessible input that renders:pointer-events:none
<input />
) withpointer-events:all
andposition:absolute
inset:0
.In short: it's 1 underlying native input as an overlay on top of N layers of render.
However, the core implementation has some limitations. The known limits are:
Visual (UI) limitations
iOS selections are always visible.
PS: iOS copy-paste touch callout menus can't be triggered if the selection is <1px in width.
iOS don't provide a way to style
input::selection
in CSS, we end up with a non-transparent selection when at least 1 char of the input is selected within the underlying input. I'm applying super negative letter-spacing to ensure the visible selection becomes as thin as possible (=1px) but can't render smaller than 1px otherwise iOS touch callout doesn't pop up.https://github.com/guilhermerodz/input-otp/assets/10366880/0157624c-a8c9-406a-8cb8-e5bcce3335e6
This would barely go noticed in a normal OTP flow where the user types in an OTP code or autofills it from his password manager. The user wouldn't even notice the selection as developers usually choose to automatically submit the form using
<input onComplete
prop so there's no time to look at 1px selections.[Mobile] Firefox shows quote markers in left+right corners of the selection.
TODO: add image
Behavior (UX) limitations
Click/touch/touchmove-to-select slots
The user cannot click/touch/hold-move and select a slot since the native input's letters are shrinked into a ~1px thin width due to added CSS
letter-spacing:-.5em
, resulting in all characters being a ultra thin condensed area. Unfortunately, the user cannot manually choose his selection by mouse/touch, only by keyboard.The expected behavior would be:
https://github.com/guilhermerodz/input-otp/assets/10366880/ee019197-a9e6-422e-a8ea-2b1220168430
The video above has been a feature request.
Related issues by the community are #31