Form input

These nifty inputs allow our members to send us information


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

Input fields

View demo Open in new window
320 x 568
View code
<form class="gg-c-form">
  <label for="textinput" class="gg-c-form__label">Text Input</label>
  <div class="gg-c-form__element">
    <input type="text" id="textinput" class="gg-c-form__input" aria-describedby="textinput-message">
  </div>

  <label for="emailinput" class="gg-c-form__label">Email Input</label>
  <div class="gg-c-form__element">
    <input type="email" id="emailinput" class="gg-c-form__input" aria-describedby="email-message">
  </div>

  <label for="dateinput" class="gg-c-form__label">Date Input</label>
  <div class="gg-c-form__element">
    <input type="date" id="dateinput" class="gg-c-form__input" aria-describedby="date-message">
  </div>

  <label for="timeinput" class="gg-c-form__label">Time Input</label>
  <div class="gg-c-form__element">
    <input type="time" id="timeinput" class="gg-c-form__input">
  </div>

  <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>

  <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>

  <label for="prefix-example" class="gg-c-form__label">Input with prefix</label>
    <div class="gg-c-form__element">
      <div class="gg-c-input-with-prefix">
      <span class="gg-c-input-with-prefix__prefix">pre</span>
        <input type="text" id="prefix-example" class="gg-c-form__input gg-c-input-with-prefix__input">
        </div>
    </div>

  <label for="prefix-example" class="gg-c-form__label">Input with suffix - link</label>
    <div class="gg-c-form__element">
      <div class="gg-c-input-with-suffix">
        <input type="text" id="prefix-example" class="gg-c-form__input gg-c-input-with-suffix__input">
        <a class="gg-u-link gg-c-input-with-suffix__suffix">resend</a>
      </div>
    </div>

  <label for="prefix-example" class="gg-c-form__label">Input with suffix - icon</label>
    <div class="gg-c-form__element">
      <div class="gg-c-input-with-suffix">
        <input type="text" id="prefix-example" class="gg-c-form__input gg-c-input-with-suffix__input">
        <div class="gg-c-input-with-suffix__suffix">
          <img class="gg-u-icon gg-u-icon--medium" src="https://www.giffgaff.design/iconography/icons/library/eye-show-password.svg" />
        </div>
      </div>
    </div>

  <label for="telinput" class="gg-c-form__label">Tel Input</label>
    <div class="gg-c-form__element">
      <input type="tel" id="telinput" class="gg-c-form__input">
    </div>
</form>

Input validation

View demo Open in new window
320 x 568
View code
<form class="gg-c-form">
  <label for="" class="gg-c-form__label">Text Input</label>
  <div class="gg-c-form__element gg-c-form__element--invalid">
    <input type="text" id="value=textinput" class="gg-c-form__input" aria-describedby="textinput-message">
    <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="prefix-example" class="gg-c-form__label">Input with prefix</label>
    <div class="gg-c-form__element gg-c-form__element--invalid">
      <div class="gg-c-input-with-prefix">
      <span class="gg-c-input-with-prefix__prefix">pre</span>
        <input type="text" id="prefix-example" class="gg-c-form__input gg-c-input-with-prefix__input">
        </div>
         <p class="gg-c-form__element-message gg-c-form__element-message--invalid">An example error message</p>
    </div>
</form>