Support alphanumeric

[deadcoder0904]

Is your feature request related to a problem? Please describe. I want both letters & numbers. Its pretty common in various services that I use for OTP.

Heck, most authenticator apps like Twitter use alphanumeric. Ik this bcz its logging me out for the last 30 days everyday so I have to type it out lol.

Describe the solution you'd like

inputMode="alphanumeric"

Implementation: https://github.com/pilcrowOnPaper/oslo/blob/c1f60eca2137cda93bb7aefed35781d85d12c7b6/src/crypto/random.ts#L52-L67

[guilhermerodz]

hi @deadcoder0904 I believe using TypeScript to narrow down inputMode to be either text or numeric wasn't a nice choice.

https://github.com/guilhermerodz/input-otp/blob/master/packages/input-otp/src/types.ts#L21

In fact, the feature you want already works out-of-the-box, it's just TypeScript complaining. You might be able to go with @ts-ignore for the next line no problem.

---

I'll remove inputMode type restriction and push into the newest 1.2.0 which will be released today.

thanks for sharing.

[deadcoder0904]

how do i make it work?

i tried || and && both but can't type alphabet & numbers both.

<OTPInput
    value={value}
    onChange={setValue}
    maxLength={6}
    // @ts-ignore
    inputMode={"text" && "numeric"}
/>

[guilhermerodz]

I think you might be referring to native HTML input's pattern attribute?

Since input-otp works with native inputs, you can provide a prop

<OTPInput
+ // overrides the default numeric pattern
+ // you can use any pattern you want
+ pattern='^[a-zA-Z0-9]+$'
/>

Alternatively, the library offers regexps so you don't have to remember them:

import {
  OTPInput,
+ REGEXP_ONLY_DIGITS_AND_CHARS
} from 'input-otp'

<OTPInput
+ pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
/>

There's no official HTML inputmode value such as alphanumeric. Check MDN. The only possible values are none text decimal numeric tel search email url.

---

From my side, I'll

• add docs around changing the default numeric regexp which is setup by the library
• remove inputmode typescript restriction as you previously mentioned

[guilhermerodz]

closing this for now, let me know if you run into any issues forward

[deadcoder0904]

does REGEXP_ONLY_DIGITS_AND_CHARS include lowercase alphabets a-z as well?

i mean is it the same as the pattern '^[a-zA-Z0-9]+$' written above?

looks like typescript says it is the same.

thanks for the solution :)

[deadcoder0904]

i'm curious do i need inputMode as well or can i drop it?

it works without it but i'm not sure if it's the best way?

[Justbeingjustin]

Just a newbie Typescript developer here.

A quick glance at the docs, and I thought that this would work to support text, but it did not:

<InputOTP
                    inputMode="text"
                    maxLength={6}
                    value={otpValue}
                    onChange={handleOTPChange}
                  >

This is what got it working for me:

    <InputOTP
                    pattern="^[a-zA-Z0-9]+$"
                    maxLength={6}
                    value={otpValue}
                    onChange={handleOTPChange}
                  >