This would be the equivalent of Inline error — Shopify Polaris React <InlineError />.
The use case for this would be being able to detach the error from the input so they can appear like the 2nd screenshot. We could use <s-text> with a tone but that is 13px whereas the error text with <s-text-field>, etc. is 12px so it doesn’t look the same
In addition to this, <s-text-field> would need the ability to have error={true}. If you currently pass a blank error through it will render the error icon with no message. Ideally there should be no icon but the input would be red as per the 2nd screenshot
The problem with detaching the error from the input field is that you also break accessibility semantics while doing that. So for sighted users this may make sense, but for accessibility technologies they’re unable to make that connection unless we also provide some way of wiring those up. However, we’ve found that most devs don’t wire those things up when given the chance, so we believe that the current setup is better for all users.
That said, I’m also always open to suggestions.
Thank you!
That is understandable. I definitely understand the sentiment of forcing accessibility compliance over the ability to “trust” developers but that does spite good willed developers that would do that.
With the pattern you currently have in discounts, how would you propose I do my errors? The squashed version doesn’t work, naturally.
It feels like I’d have to remove the error state as a whole and try and signpost to it from a banner at the top of the page which hurts everyone, not just screen readers.
It’s worth considering whether you need such a long error message; given the input already has a label, could it be considerably condensed?
Another option is to use a container query to change the layout on smaller screens so that the quantity field isn’t so small in some cases.
Thanks for your help and insight so far @Anthony_Frehner 
I’m just copying what is currently in the native discount UI for consistency between screens at the moment. That’s where the UI and error messages come from.
I think I’ll have to just remove the error state for now and try and signpost to it from a banner at the top. Outside of “Error” it’ll be quite hard to condense it and maintain anything like the UI of the native discounts.
