base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

Published 20 hours ago • verified publisher icon mui

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

Open marcpachecog opened this issue 1 year ago • 5 comments

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

marcpachecog avatar Jan 16 '24 13:01 marcpachecog