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.

Changelog

Input with suffix

The input with suffix component had a small bug with the way it displayed when the input was invalid. This has now been fixed as of version 55.3.1.

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="textareainput" class="gg-c-form__label">Textarea Input</label>
  <div class="gg-c-form__element gg-c-form__textarea--container">
    <textarea id="textareainput" class="gg-c-form__textarea" aria-describedby="textarea-message" cols="80" rows="3" maxlength="4000" placeholder="Your message here..."></textarea>
  </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>

  <label for="prefix-example" class="gg-c-form__label">Input with suffix - link</label>
    <div class="gg-c-form__element gg-c-form__element--invalid">
      <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>
      <p class="gg-c-form__element-message gg-c-form__element-message--invalid">An example error message</p>
    </div>

  <label for="prefix-example" class="gg-c-form__label">Input with suffix - icon</label>
    <div class="gg-c-form__element gg-c-form__element--invalid">
      <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>
      <p class="gg-c-form__element-message gg-c-form__element-message--invalid">An example error message</p>
    </div>
</form>