andreaswilli/react-verification-input

Add caret

Closed this issue · 3 comments

I would like to display the caret, possibly as a bar.
This would be the default behaviour if the characters would use an <input/> as an HTML element.
Obtaining a similar result with just CSS is not super simple.

I would like to have something similar to the login that Slack is doing, attached below you can find a screenshot.
image

As you might notice, there's a "bar caret", which is helpful to catch the user's attention. This would be useful when especially when the autofocus is configured as "true".

I don't think I want to add this to the library. My main concern being that native cursors look different on different platforms.

However, I might try to implement a cursor using CSS and add it to the docs like a "recipe".

Related #11

@desoss I added a CSS implementation to the docs.
It actually turned out pretty well, maybe I'll directly integrate it with the library in the future.