[BUG]

[ivandamyanov]

Hi, I am NextJS 15.2.3 with React 19.0.0
I am wrapping OTPInput in my own custom component based on your shadcn example. I have defined a regex that allows - and _ in addition to numbers and characters

This regex works but I get a console error:
const regex = "^[a-zA-Z0-9_\-]+$"

console error: Invalid regular expression: /^[a-zA-Z0-9_-]+$/v: Invalid character in character class

This regex is valid and produces no error (I need to escape twice):
const regex = "^[a-zA-Z0-9_\\-]+$"

Is this normal behavior?

Also, sorry to ask 2 things but, even when the input is valid, before the actual input fields I get a red squiggly in empty space if I continue typing after the max number of characters as if some auto correct is triggerred, any way to fix this?

Version of the library: 1.4.2

Expected Behavior

"^[a-zA-Z0-9_-]+$" - I should be able to escape with one backslash?

Current Behavior

I need to double-escape

Thank you for the amazing component!

[kivvvvv]

I can only relate to one of your issues:

Also, sorry to ask 2 things but, even when the input is valid, before the actual input fields I get a red squiggly in empty space if I continue typing after the max number of characters as if some auto correct is triggerred, any way to fix this?

That red squiggly error thingy is a spelling error visual that the browser is trying to tell the user that there are some misspelling words in the input. The real input element is styled to be hidden for styling purposes(as far as I know though).

Even though the value in the input is correct according to the provided regex, still it is not a correct word.

I already made a PR for that, #82.

[kguzek]

This regex works but I get a console error: const regex = "^[a-zA-Z0-9_-]+$"

console error: Invalid regular expression: /^[a-zA-Z0-9_-]+$/v: Invalid character in character class

This regex is valid and produces no error (I need to escape twice): const regex = "^[a-zA-Z0-9_\-]+$"

Is this normal behavior?

In a regular expression, the hyphen (-) has special meaning only when placed between two characters inside a character class (e.g., [a-z] means all lowercase letters from a to z). If you place - at the beginning or end of the character set (like [_-] or [-_]), it's interpreted literally, and there's no need to escape it.

So this is perfectly valid and doesn't throw an error:

const regex = /^[a-zA-Z0-9_-]+$/;

Also, for future reference, this wasn't an issue with the input-otp repository but with JavaScript, so this would have been a question better asked on a forum like StackOverflow (or even just ChatGPT).

[guilhermerodz]

hi @ivandamyanov

regarding the spellcheck marker, it could definitely be annoying and therefore an issue (likely).

seems like #82 will address it.

closing this as not planned since the main point you mentioned doesn't seem to be related to input-otp according to @kguzek