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

[marcpachecog]

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

• https://zagjs.com/components/react/pin-input
• https://chakra-ui.com/docs/components/pin-input
• https://vuetifyjs.com/en/components/otp-input/
• https://mantine.dev/core/pin-input/
• https://www.radix-vue.com/components/pin-input
• https://twitter.com/liampmccabe/status/1754450110992244830

[michaldudak]

👍 Let's wait for the community upvotes so we can prioritize this.

[oliviertassinari]

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]

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

[oliviertassinari]

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

[dantman]

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.