primitives icon indicating copy to clipboard operation
primitives copied to clipboard

Published 20 hours ago • verified publisher icon radix-ui

[New Primitive] Pin / OTP input component

Open brielov opened this issue 1 year ago • 4 comments

Feature request

It would be nice to have some sort of pin input for OTPs or email sent short codes for login.

Overview

Many user authentication strategies rely on sending a one-time password (OTP) or a short code that could be numeric or alphanumeric. You can of course use a simple input for that, but many sites implement one input box for each character which makes for a clear indication and leaves no room for whitespace. It also handles the paste event correctly.

Examples in other libraries

Chakra UI

image

Who does this impact? Who is this for?

Anybody that needs to deal with OTPs

brielov avatar Jun 23 '23 11:06 brielov

https://github.com/leonardodino/rci

sadeghbarati avatar Jun 25 '23 06:06 sadeghbarati

There is an RFC for that, from @benoitgrelard: https://github.com/radix-ui/primitives/pull/1978

pedroapfilho avatar Jul 11 '23 10:07 pedroapfilho

Appears that RFC hasn't had any activity in 9 months

Jamison1 avatar Nov 27 '23 21:11 Jamison1

Additional examples

  • https://park-ui.com/docs/tailwind/components/pin-input
  • https://ark-ui.com/docs/components/pin-input

jlarmstrongiv avatar Jan 25 '24 07:01 jlarmstrongiv