[OtpInput] Add a hook, support OTP/ PinInput `usePinInput`

marcpachecog commented 6 months ago

Summary

I believe it would be fantastic to introduce a base-ui hook specifically designed for handling OTP inputs. Chakra already offers a PinInput component along with a headless UI hook in their Zag library (https://zagjs.com/components/react/pin-input).

Examples

No response

Motivation

No response

Search keywords:

Features to support

Past from plain string, e.g. pasting 990312 on mobile should fill the whole component.
Caret should be managed as if it was a single <input>.
Be 6 pins by default, most common use case is 2FA
Submit form after past when pressing Enter

Benchmarks

michaldudak commented 6 months ago

:+1: Let's wait for the community upvotes so we can prioritize this.

oliviertassinari commented 6 months ago

I have added a few benchmarks.

2FA grew in popularity recently, and so did this component. I wonder about the impact passwordless (biometric, passkey, device, email link) authentification will have though.

TheOneTheOnlyJJ commented 5 months ago

It would be great to have this in Material UI as well, not only here in Base UI.

oliviertassinari commented 4 months ago

@michaldudak before we transfer issues, we need to create the labels. We loose all of that data otherwise.

dantman commented 2 weeks ago

2FA grew in popularity recently, and so did this component. I wonder about the impact passwordless (biometric, passkey, device, email link) authentification will have though.

The email link flow has the downside of a poor user experience if the device they are using to read the email and the device they are trying to login with are different. The alternative flow is one where a pin is emailed and entered the same way as an OTP could potentially become more common. That's actually the exact scenario that prompted me to make the web search that included this page as a result.

mui / base-ui