A bit similar to this question Material Design - How to display a log in error

Though it doesn't address how to do this on a larger screen (i.e. desktop browser) since snackbar at the bottom as an error message is a bit weird on a larger screen, please see image below.

enter image description here

Official material design guidelines doesn't include any web-related guidelines for this case.

I'm currently using angular 5 and angular-material which is designed to work both on desktop and mobile.


The material design guidelines have a section called Errors.

For your use case, it recommends:

If two or more fields have incompatible inputs:

  • In the text field, indicate a fix is needed. Add an error message below.
  • Display a message at the top of the form, or screen, summarizing the fixes needed and any additional explanation

This is what it looks like on mobile:

enter image description here

I imagine in your case, the bulk message could appear right below the "Sign in" heading.

As for snackbars, it goes on to say this:

The snackbar contains app feedback about a peripheral error. Snackbars are transient. Don't use them for critical, persistent, or bulk errors.

  • This is exactly what I mentioned in my answer. Thanks for validating! – Bhupi Apr 25 '18 at 8:05
  • So I guess, it'll look somewhat like what any other front end framework will look like. – Bk Santiago Apr 26 '18 at 3:31
  • 2
    The link has been an archived one now: material.io/archive/guidelines/patterns/… Does the new version of Material design not like it any more? – Jian Chen Jul 5 '18 at 5:20
  • 1
    @JianChen From a cursory look, it seems there's no guidance on errors in the new HIG version at all, beside a very basic one for text fields. As the new version introduces a more flexible design system, perhaps the Errors page simply hasn't been upgraded yet? Either way, there are no recommendations that would advise against it, so the error patterns still seem valid to me. – Tin Man Jul 5 '18 at 10:02
  • 2
    Banners might fit this purpose, there's also a nice comparison between snackbar, banner and dialog: material.io/design/components/banners.html – brunettdan Dec 25 '18 at 21:01

I would do away with the snackbar completely on the larger screen. I would do inline error messaging on larger screens right below the control in error along with highlighting the control in red as shown in your screenshot.

If you are married to the snackbar then below is my recommendation 1. Move the snack bar to the top on larger screens. Add animation so that the snackbar drops from the top of the screen. 2. Expand the snackbar to cover a larger area than shat you have currently. I would go about 3 times if not more as tall as you have it now

Material design specifications are said to be responsive but some of them do fall flat for larger screen renderings. But well nobody is perfect!

Let me know if that helps!

  • Married to the snackbar is the biggest form of commitment I have heard of – George Dimitriadis Dec 20 '19 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.