Email input

These nifty inputs allow our members to send us their email addresses


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

  

Input validation

View demo Open in new window
320 x 568
View code
    <form class="gg-c-form">
  <label for="emailinput" class="gg-c-form__label">Email Input</label>
  <div class="gg-c-form__element gg-c-form__element--invalid">
    <input type="email" id="emailinput" class="gg-c-form__input" aria-describedby="email-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>
</form>