1

I have a form where I want to show some errors (like "Email field required"). What I currently have is a red error message under the description (like shown below).

The issue is, when the error appears, the layout shifts to make space for the error. It's not the worst thing in the world but I'd prefer to avoid layout movement.

What I'm considering:

  • Just leave as is and make the users a bit annoyed
  • Leave some space for the error but keep the form item far from the next item (not sure what to do if the error needs 2 lines)
  • When I show the error, hide the description

What do you think?

enter image description here

Improve this question

2 Answers 2

Reset to default
2

Depending on the case, you can match the description with the alert and simply show the color change on the error:

enter image description here

Improve this answer
1
  • 2
    This seems like a nice middle ground, maybe even add some error information to it. So if I have enough space, it won't make the layout shift. Like "Enter collection name. Minimum size is 4 characters"
    – Artur Carvalho
    Commented Jul 17, 2023 at 10:17
1

So you can make use of the visibility CSS property.

With it you can create the error message below the description and set the visibility CSS prop to hidden. This is the same as setting the opacity to 0.

The best part is that you probably already have code that's doing the layout shift, you just add this to your CSS and you good to go.

Personally, I prefer the layout shift, it lets the user know they've done something wrong somewhere, but I've also been a bit put off by it at the same time.

Improve this answer
2
  • Thank you for the answer, technically I know how to implement all. I'm more considering how to do it.
    – Artur Carvalho
    Commented Jul 17, 2023 at 10:18
  • 1
    @ArturCarvalho Ah I see, this was just my opinion on how to get to what you want. No DOM thrashing if people still worry about that.
    – Kitanga Nday
    Commented Jul 17, 2023 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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