How to add autocomplete="one-time-code" for WebOTP support?

[rijans]

• Describe the Feature Request How to add autocomplete="one-time-code" for WebOTP support?

https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API https://developer.chrome.com/en/articles/web-otp/ https://developer.chrome.com/blog/cross-device-webotp/

• Describe Preferred Solution Add support for autocomplete="one-time-code" or any custom prop?

[prateek3255]

@rijans With v3 you have the full control of the input you are rendering so you can add this prop to the input yourself, like this:

<OtpInput
      value={otp}
      onChange={setOtp}
      numInputs={4}
      renderSeparator={<span>-</span>}
      renderInput={(props) => <input {...props} autocomplete="one-time-code" />}
    />

[christiaanwesterbeek]

I am getting a typscript error when I try that on the autocomplete attribute.

Type '{ autocomplete: string; onChange: ChangeEventHandler; onBlur: FocusEventHandler; ... 11 more ...; type: AllowedInputTypes; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'. Property 'autocomplete' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'. Did you mean 'autoComplete'?ts(2322)

So I tried autoComplete="one-time-code". No typescript error and it worked.