Validation error positioning

[sergei-maertens]

NL DS leans towards putting validation errors above the field (consistent with the gov.uk approach), while the Open Forms theme puts them below. We want to avoid users having to override the container/wrapper component layout just to achieve this, as there should be CSS-only solutions.

Possible options:

• flex-direction row + the order property
• CSS grid with named slots/subgrids

[vaszig]

Open Forms is now showing the errors below the field and the same is happening for Utrecht.

https://open-formulieren.github.io/open-forms-sdk/?path=/story/pure-react-components-forms-textfield--validation-error

https://nl-design-system.github.io/utrecht/storybook/?path=/story/react_react-form-field--form-field-textbox

• This will be discussed with the NLDS team in our monthly and see if this will be added to Utrecht or what are their suggestions. For now it doesn't make sense to change something since we both have the same approach.
• A nice approach would be to use grid and define the areas via a design token (textbox-grid-template-areas), which could update the checkbox component ( https://github.com/nl-design-system/utrecht/blob/2d53158b64091e58a6edce127669ace2db28d162/components/form-field/css/_mixin.scss#L102) for example.

[sergei-maertens]

Discussed with NL DS - the intent is indeed that the validation error is above the field, but their own storybook gives incorrect examples. They will update those components/examples.