Auth Code

A one-time password (OTP) is an automatically generated numeric or alphanumeric string of characters that authenticates a user for a single transaction or login session.

Code

Code

<div class="backoffice-input-otp">
  <input
    autocomplete="one-time-code"
    class="backoffice-input backoffice-input-otp-input"
    inputmode="text"
    maxlength="1"
    pattern="[a-zA-Z0-9]{1}"
    data-np-intersection-state="visible"
  />
  <input
    autocomplete="one-time-code"
    class="backoffice-input backoffice-input-otp-input"
    inputmode="text"
    maxlength="1"
    pattern="[a-zA-Z0-9]{1}"
    data-np-intersection-state="visible"
  />
  <input
    autocomplete="one-time-code"
    class="backoffice-input backoffice-input-otp-input"
    inputmode="text"
    maxlength="1"
    pattern="[a-zA-Z0-9]{1}"
    data-np-intersection-state="visible"
  />
  <input
    autocomplete="one-time-code"
    class="backoffice-input backoffice-input-otp-input"
    inputmode="text"
    maxlength="1"
    pattern="[a-zA-Z0-9]{1}"
    data-np-intersection-state="visible"
  />
</div>

Details

AttributeTypeDescription
.backoffice-input-otp
component
parent component to use together with inputs OTP style
.backoffice-input-otp-input
component
Input component with OTP style
.backoffice-input-otp-input-error
modifier
Input component with OTP error style
.backoffice-input-otp-input[aria-invalid="true"]
alternative
Input component with OTP error style using aria-invalid