Number input

These nifty inputs allow our members to input a number

Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

While using input type="number" users could accidentally increase or decrease the number using the scroll wheel on the mouse or the scroll gesture on their trackpad. This feature can be useful when collecting countable data but bad if entering data such as passport numbers. We have switched to input type="text" inputmode="numeric" pattern="[0-9]*" because it allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.

How they look

Number input

View demo

320 x 568

View code

    
<form class="gg-c-form">
  <label for="numberinput" class="gg-c-form__label">Number Input</label>
  <div class="gg-c-form__element">
    <input type="text" inputmode="numeric" pattern="[0-9]*" id="numberinput" class="gg-c-form__input">
  </div>
</form>

Number input with spinners

View demo

320 x 568

View code

    
<form class="gg-c-form">
  <label for="numberinputselect" class="gg-c-form__label">Number Input With Spinners</label>
  <div class="gg-c-form__element gg-c-form__element--input-with-spinner-controls">
    <input type="text" inputmode="numeric" pattern="[0-9]*" id="numberinputselect" class="gg-c-form__input">
    <div class="gg-c-form__spinner-controls">
      <a href="#" id="-decrement" class="gg-c-form__spinner-controls__control" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.12 85.04" class="gg-u-icon gg-u-icon--small"><rect width="255.12" height="85.04"></rect></svg></a>
      <a href="#" id="-increment" class="gg-c-form__spinner-controls__control" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.12 255.12" class="gg-u-icon gg-u-icon--small"><rect y="85.04" width="255.12" height="85.04"></rect><rect x="85.04" width="85.04" height="255.12"></rect></svg></a>
    </div>
  </div>
</form>

Input validation

View demo

320 x 568

View code

    
<form class="gg-c-form">
  <label for="numberinput" class="gg-c-form__label">Number Input</label>
  <div class="gg-c-form__element gg-c-form__element--invalid">
    <input type="text" inputmode="numeric" pattern="[0-9]*" id="numberinput" class="gg-c-form__input">
    <p class="gg-c-form__element-message gg-c-form__element-message--invalid">An example error message</p>
    <p class="gg-c-form__element-message gg-c-form__element-message--invalid">Another example error message</p>
  </div>

<label for="numberinputselect" class="gg-c-form__label">Number Input With Spinners</label>

  <div class="gg-c-form__element gg-c-form__element--invalid gg-c-form__element--input-with-spinner-controls">
    <input type="text" inputmode="numeric" pattern="[0-9]*" id="numberinputselect" class="gg-c-form__input">
    <div class="gg-c-form__spinner-controls">
      <a href="#" id="-decrement" class="gg-c-form__spinner-controls__control" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.12 85.04" class="gg-u-icon gg-u-icon--small"><rect width="255.12" height="85.04"></rect></svg></a>
      <a href="#" id="-increment" class="gg-c-form__spinner-controls__control" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.12 255.12" class="gg-u-icon gg-u-icon--small"><rect y="85.04" width="255.12" height="85.04"></rect><rect x="85.04" width="85.04" height="255.12"></rect></svg></a>
    </div>
    <p class="gg-c-form__element-message gg-c-form__element-message--invalid">An example error message</p>
    <p class="gg-c-form__element-message gg-c-form__element-message--invalid">Another example error message</p>
  </div>
</form>