Form

Number input

Published on

Description

The number input accepts numeric values. It includes browser-provided increment/decrement controls and restricts input to digits on mobile keyboards.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="number">
      <hgroup>
        <h1>Number</h1>
      </hgroup>
    </label> <span id="number-hint">Should be prime and greater than 99</span> <input value="" id="number" name="number" type="number" size="3" aria-describedby="number-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-number" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Inherit typography for WCAG 1.4.12 compliance.
  • The increment/decrement spinner buttons can be difficult for some users. Consider a plain text input with inputmode="numeric" and pattern="[0-9]*" for simpler numeric entry.
  • Associate min, max, and step constraints via hint text using aria-describedby.

References

Variables

None for input