Validation errors should not shift input fields

[mavarius]

Describe the bug
When error messages appear below input fields, everything below them shifts.

Expected behavior
The layout of the form should remain static when validation errors are present.

[daviddkkim]

I can make this work for if there is only error message. but if there are both error message And help message, I'm not sure I can make the spacing work because of how absolute positioning works with css. But I could be completely wrong here.

options:

1. I can make it so that when error message is present, we hide the help message.
2. We figure out some genius way to absolute position both the help and error message relative to each other despite both being absolute positions

Thoughts ? @mavarius

[daviddkkim]

I took a look at how other design systems handle this,

Material UI has it so that the helper text does both normal state helper message and error message. The error state toggle just changes the color and messaging of the helper text.

Carbon has it so that the error message take up space when it appears and shifts everything below.

I like the idea of the error message not shifting things just as this issue points out so maybe we could emulate the material uI pattern?

[mavarius]

Let's go with the error message replacing the helper text.

[kristinarobinson]

close this until a specific input field is referenced.