search

guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.52k stars 53 forks source link

InputOTP Placeholders #49

Closed almond5 closed 2 weeks ago

almond5 commented 6 months ago

Is there no support for placeholders on each InputOTPSlot or the whole InputOTPGroup? image

guilhermerodz commented 6 months ago

Hey @almond5 thanks for opening this issue.

I totally forgot implementing a good DX for the placeholder option.

There's a workaround for rendering that placeholder, but that's logical and not ideal. However, as a workaround, you may be able to check if the placeholder is active by checking isPlaceholderActive = value.length === 0 && placeholder !== null. Then, you should be able to render only the placeholder[slotIdx] and style it as you wish.

I should definitely add a feature around this. There's currently no direct support to placeholder. I am now considering creating a feature for that.

Again, thanks for reporting.

guilhermerodz commented 2 weeks ago

Hey @almond5 as of 1.4.0 you can now use placeholder as a prop and then recover it as placeholderChar.

Feel free to follow the CSS changes I've made to the README.md