OTP component request

[thorbde]

Provide a general summary of the feature here

Requesting an OTP (one time password) component from React Aria. It's a component type that would greatly benefit from being "standardized" across the web, since multiple different password managers attempt to autofill them.

Example in ShadCN: https://ui.shadcn.com/docs/components/input-otp

Perhaps this can be achieved with current input components, but it would be very beneficial to have an example of how to achieve this in a semantic, accessible way.

🤔 Expected Behavior?

😯 Current Behavior

💁 Possible Solution

No response

🔦 Context

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

You could probably do something like this #5718

[musjj]

I think that would work for certain designs, but not all. For example, look at shadcn's implementations:

[snowystinger]

Sure you can, https://codesandbox.io/p/sandbox/ndg84w
I've included a hooks based version as well in case you need finer control

The trick to the shadcn is that the boxes aren't actually part of the input and the input itself is hidden. You can see this by inspecting the DOM. Also, they have a funny behavior, if you click and drag on the OTP, you can select some unexpected ranges because the font size/spacing of the hidden input doesn't match the visuals on top. There are probably some improvements that could be made for that. For now though it supports copy and paste as because of that.