Error messages placement for new inputs

[francovenica]

Problem

tl;dr: UI jumps when an error message appears under an input

New outlined inputs were implemented across the entire site in all forms. The problem is that these new inputs have the error message (when a wrong value is entered) showing outside of the input, making the form wiggle up and down as the error shows/disappears:

Solution

As per @liliiaorlenko, we need to reserve some whitespace below each input to accommodate for potential error messages w/o making the form jump.

[iamacook]

UX-wise, by replacing the label with the error message, we remove the 'meaning'.

We could add a margin below the field so that it doesn't 'jump' when the error (dis-)appears. What do you think? cc @liliiaorlenko

[liliiaorlenko]

UX-wise, by replacing the label with the error message, we remove the 'meaning'.

We could add a margin below the field so that it doesn't 'jump' when the error (dis-)appears. What do you think? cc @liliiaorlenko

If its possible to apply margin in all of the cases like this, then I would keep the error state with message on a bottom. @iamacook you right, if we will put message on top it will lose the meaning. Also each field must have a default margin on a bottom to prevent cases like this. It will give an extra space for the text in any situations. We do that in a design as well. Pls check this option!

[katspaugh]

Fixed in web-core.