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.

How they look

Number input

View demo Open in new window
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="number" id="numberinput" class="gg-c-form__input">
  </div>
</form>

  

Number input with spinners

View demo Open in new window
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="number" 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 Open in new window
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="number" 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="number" 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>