Creating a 2FA verification pin field

[deltasierra96]

Not really sure what else to write about this so I'll keep it short.

How would one go about creating a pin field that only accepts a selection of say 4 numbers that automatically forces focus to the next input?

Would utilizing a NumberField component with FocusScope or is there a better approach?

Conceptually it would be similar to the DateField component however only accepting numbers.

Many thanks for any suggestions.

[reidbarber]

Would utilizing a NumberField component with FocusScope or is there a better approach?

I think this is the right idea, but the downsides are that since there are multiple fields, you can't have autocomplete="one-time-code", pasting might not work, and it may be confusing to screen reader users.

It seems like it may be better to have one input, and use some styling tricks to make it visually appear like multiple inputs, like this: https://dev.to/madsstoumann/using-a-single-input-for-one-time-code-352l

[deltasierra96]

Wow. Brilliantly simple concept that totally negates the issues that were going to rear their ugly head's.

Thanks, Reid.