Form

One time code input

Published on

Description

The one-time code input provides a text field for entering verification codes sent via SMS or email. It uses autocomplete="one-time-code" to enable automatic code detection and autofill.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="code">
      <hgroup>
        <h1>Number code</h1>
      </hgroup>
    </label> <span id="code-hint">Enter 6 digit code from your notification</span> <input value="" id="code" name="code" dir="auto" autocapitalize="off" autocomplete="one-time-code" autocorrect="off" spellcheck="false" pattern="^[0-9]*$" size="6" inputmode="numeric" type="text" aria-describedby="code-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-one-time-code" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Use autocomplete="one-time-code" to enable SMS autofill on supported devices.
  • Use inputmode="numeric" to show a numeric keyboard on mobile.
  • Inherit typography for WCAG 1.4.12 compliance.

References

Variables

None for input