This has been deprecated and will be removed in a future release

Form error

This is how we show an error for a whole form

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.

Please use the Minor Alert component instead of this components.

How we design them

  • Try to be helpful
  • Use this when you can’t put errors next to the inputs on a page

How we use them

1. Form error example

View demo Open in new window
320 x 568
View code
<div class="gg-c-form-error" role="alert">
  <p class="gg-u-screen-reader-only">
  <img src="" class="gg-c-form-error__icon" />
  <div class="gg-c-form-error__message">
    <p class="gg-c-form-error__title">
      Looks like you've made a mistake
      But it's ok, this is how you can fix it.
      Keep seeing this message? <a href="#" class="gg-u-link">Try this instead</a>