Input with suffix

Go on, append something nice!


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="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>
</form>

  

Input validation

View demo Open in new window
320 x 568
View code
    <form class="gg-c-form">
  <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>