@instructure/ui-form-field 11.7.8-snapshot-9 → 11.7.8-snapshot-10

package/CHANGELOG.md

@@ -3,12 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.8-snapshot-9](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-9) (2026-10-02)
-
-**Note:** Version bump only for package @instructure/ui-form-field
-
+## [11.7.8-snapshot-10](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-10) (2026-10-02)
 
+### Bug Fixes
 
+* **ui-form-field:** always display messages at the top of form groups (radio group, checkbox group, formFieldGroup) ([2d18472](https://github.com/instructure/instructure-ui/commit/2d18472a52846202bf0993e2786c5c21dc7aba1b))
 
 
 ## [11.7.7](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7) (2026-09-23)

package/es/FormFieldLayout/v2/index.js

@@ -69,18 +69,30 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
   // Filter out error and success messages when disabled or readOnly
   const filteredMessages = disabled || readOnly ? messages?.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;
 
-  // Compute style props
-  const hasMessages = filteredMessages && filteredMessages.length > 0 ? filteredMessages.some(msg => {
-    if (msg.text) {
-      if (typeof msg.text === 'string') {
-        return msg.text.length > 0;
+  // any message, even if it's not visible (screenreader only)
+  let hasMessages = false;
+  let hasVisibleMessage = false;
+  if (filteredMessages) {
+    for (const msg of filteredMessages) {
+      if (msg.text) {
+        if (typeof msg.text === 'string') {
+          if (msg.text.length > 0) {
+            hasMessages = true;
+            if (msg.type !== 'screenreader-only') {
+              hasVisibleMessage = true;
+            }
+          }
+        } else {
+          // if the message is a React component we just assume its non-empty
+          hasMessages = true;
+          if (msg.type !== 'screenreader-only') {
+            hasVisibleMessage = true;
+          }
+        }
       }
-      return true;
     }
-    return false;
-  }) : false;
+  }
   const hasVisibleLabel = label ? hasVisibleChildren(label) : false;
-  const hasErrorMsgAndIsGroup = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError') && !!isGroup;
   const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
 
   // Styles
@@ -90,13 +102,13 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
     params: {
       hasMessages,
       hasVisibleLabel,
-      hasErrorMsgAndIsGroup,
+      hasVisibleMessage,
+      isGroup: !!isGroup,
       inline,
       layout,
       vAlign,
       labelAlign,
       margin,
-      messages: filteredMessages,
       isRequired,
       invalid
     },
@@ -167,7 +179,7 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else return null;
   };
-  const renderVisibleMessages = () => {
+  const renderMessages = () => {
     return hasMessages ? _jsx(FormFieldMessages, {
       id: messagesId,
       messages: filteredMessages,
@@ -183,11 +195,11 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
       width
     },
     ref: handleRef,
-    children: [renderLabel(), hasErrorMsgAndIsGroup && renderVisibleMessages(), _jsx("span", {
+    children: [renderLabel(), isGroup && renderMessages(), _jsx("span", {
       css: styles?.formFieldChildren,
       ref: handleInputContainerRef,
       children: children
-    }), !hasErrorMsgAndIsGroup && renderVisibleMessages()]
+    }), !isGroup && renderMessages()]
   });
 });
 FormFieldLayout.displayName = 'FormFieldLayout';

package/es/FormFieldLayout/v2/styles.js

@@ -23,22 +23,18 @@
  */
 
 import { calcSpacingFromShorthand } from '@instructure/emotion';
-const generateGridLayout = (isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages) => {
+const generateGridLayout = (isInlineLayout, isGroup, hasVisibleLabel, hasMessages) => {
   if (isInlineLayout) {
-    if (hasErrorMsgAndIsGroup) {
-      if (hasMessages) {
-        return `${hasVisibleLabel ? ' "label messages"' : '. messages'}
-                                      ". controls"`;
-      } else {
-        return `${hasVisibleLabel ? ' "label controls"' : '. controls'}`;
-      }
+    if (isGroup && hasMessages) {
+      return `${hasVisibleLabel ? ' "label messages"' : '". messages"'}
+              ${hasVisibleLabel ? ' "label controls"' : '". controls"'}`;
     } else {
-      return `${hasVisibleLabel ? ' "label controls"' : '. controls'}
+      return `${hasVisibleLabel ? ' "label controls"' : '". controls"'}
               ${hasMessages ? ' ". messages"' : ''}`;
     }
   }
   // stacked layout -- in this case we could use a simple `Flex`
-  if (hasErrorMsgAndIsGroup) {
+  if (isGroup) {
     return `${hasVisibleLabel ? ' "label"' : ''}
             ${hasMessages ? ' "messages"' : ''}
             "controls"`;
@@ -65,22 +61,19 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
     vAlign,
     labelAlign,
     margin,
-    messages
-  } = params;
-  const {
     hasMessages,
+    hasVisibleMessage,
     hasVisibleLabel,
-    hasErrorMsgAndIsGroup
+    isGroup
   } = params;
   const cssMargin = calcSpacingFromShorthand(margin, {
     ...sharedTokens.spacing,
     ...sharedTokens.legacy.spacing
   });
   const isInlineLayout = layout === 'inline';
-  const hasNonEmptyMessages = messages?.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);
 
   // This is quite ugly, we should simplify it
-  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages);
+  const gridTemplateAreas = generateGridLayout(isInlineLayout, isGroup, hasVisibleLabel, hasMessages);
   let gridTemplateColumns = '100%'; // stacked layout
   if (isInlineLayout) {
     gridTemplateColumns = '1fr 3fr';
@@ -135,10 +128,10 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       [`@media screen and (width < ${sharedTokens.breakpoints.md})`]: {
         // for small screens use the stacked layout
         gridTemplateColumns: '100%',
-        gridTemplateAreas: generateGridLayout(false, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
+        gridTemplateAreas: generateGridLayout(false, isGroup, hasVisibleLabel, hasMessages)
       },
       columnGap: '0.375rem',
-      rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
+      rowGap: hasVisibleMessage ? componentTheme.gapPrimitives : '0',
       width: '100%',
       ...(inline && {
         display: 'inline-grid',
@@ -151,15 +144,11 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(label)': labelStyles,
       '&:-webkit-any(label)': labelStyles,
-      paddingBottom: hasNonEmptyMessages ? '0' : componentTheme.gapPrimitives
+      paddingBottom: hasVisibleMessage ? '0' : componentTheme.gapPrimitives
     },
     formFieldChildren: {
       label: 'formFieldLayout__children',
       gridArea: 'controls',
-      // add a small margin between the message and the controls
-      ...(hasMessages && hasErrorMsgAndIsGroup && {
-        marginTop: '0.375rem'
-      }),
       ...(isInlineLayout && inline && {
         [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
           justifySelf: 'start'

package/es/FormFieldMessages/v2/index.js

@@ -68,6 +68,8 @@ let FormFieldMessages = (_dec = withStyleNew(generateStyle), _dec(_class = class
       messages,
       styles
     } = this.props;
+    // TODO try to only use this component in FormFieldLayout, then
+    // we could move a proper hasMessages logic here (see FormFieldLayout)
     return messages && messages.length > 0 ? _jsx("div", {
       css: styles?.formFieldMessages,
       ...omitProps(this.props, FormFieldMessages.allowedProps),
@@ -79,7 +81,7 @@ let FormFieldMessages = (_dec = withStyleNew(generateStyle), _dec(_class = class
             variant: msg.type,
             children: msg.text
           })
-        }, `error${i}`);
+        }, `FormFieldMessage${i}`);
       })
     }) : null;
   }

package/lib/FormFieldLayout/v2/index.js

@@ -84,18 +84,30 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
   // Filter out error and success messages when disabled or readOnly
   const filteredMessages = disabled || readOnly ? messages?.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;
 
-  // Compute style props
-  const hasMessages = filteredMessages && filteredMessages.length > 0 ? filteredMessages.some(msg => {
-    if (msg.text) {
-      if (typeof msg.text === 'string') {
-        return msg.text.length > 0;
+  // any message, even if it's not visible (screenreader only)
+  let hasMessages = false;
+  let hasVisibleMessage = false;
+  if (filteredMessages) {
+    for (const msg of filteredMessages) {
+      if (msg.text) {
+        if (typeof msg.text === 'string') {
+          if (msg.text.length > 0) {
+            hasMessages = true;
+            if (msg.type !== 'screenreader-only') {
+              hasVisibleMessage = true;
+            }
+          }
+        } else {
+          // if the message is a React component we just assume its non-empty
+          hasMessages = true;
+          if (msg.type !== 'screenreader-only') {
+            hasVisibleMessage = true;
+          }
+        }
       }
-      return true;
     }
-    return false;
-  }) : false;
+  }
   const hasVisibleLabel = label ? (0, _hasVisibleChildren.hasVisibleChildren)(label) : false;
-  const hasErrorMsgAndIsGroup = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError') && !!isGroup;
   const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
 
   // Styles
@@ -105,13 +117,13 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
     params: {
       hasMessages,
       hasVisibleLabel,
-      hasErrorMsgAndIsGroup,
+      hasVisibleMessage,
+      isGroup: !!isGroup,
       inline,
       layout,
       vAlign,
       labelAlign,
       margin,
-      messages: filteredMessages,
       isRequired,
       invalid
     },
@@ -182,7 +194,7 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
       });
     } else return null;
   };
-  const renderVisibleMessages = () => {
+  const renderMessages = () => {
     return hasMessages ? (0, _jsxRuntime.jsx)(_index.FormFieldMessages, {
       id: messagesId,
       messages: filteredMessages,
@@ -198,11 +210,11 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
       width
     },
     ref: handleRef,
-    children: [renderLabel(), hasErrorMsgAndIsGroup && renderVisibleMessages(), (0, _jsxRuntime.jsx)("span", {
+    children: [renderLabel(), isGroup && renderMessages(), (0, _jsxRuntime.jsx)("span", {
       css: styles?.formFieldChildren,
       ref: handleInputContainerRef,
       children: children
-    }), !hasErrorMsgAndIsGroup && renderVisibleMessages()]
+    }), !isGroup && renderMessages()]
   });
 });
 FormFieldLayout.displayName = 'FormFieldLayout';

package/lib/FormFieldLayout/v2/styles.js

@@ -29,22 +29,18 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 
-const generateGridLayout = (isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages) => {
+const generateGridLayout = (isInlineLayout, isGroup, hasVisibleLabel, hasMessages) => {
   if (isInlineLayout) {
-    if (hasErrorMsgAndIsGroup) {
-      if (hasMessages) {
-        return `${hasVisibleLabel ? ' "label messages"' : '. messages'}
-                                      ". controls"`;
-      } else {
-        return `${hasVisibleLabel ? ' "label controls"' : '. controls'}`;
-      }
+    if (isGroup && hasMessages) {
+      return `${hasVisibleLabel ? ' "label messages"' : '". messages"'}
+              ${hasVisibleLabel ? ' "label controls"' : '". controls"'}`;
     } else {
-      return `${hasVisibleLabel ? ' "label controls"' : '. controls'}
+      return `${hasVisibleLabel ? ' "label controls"' : '". controls"'}
               ${hasMessages ? ' ". messages"' : ''}`;
     }
   }
   // stacked layout -- in this case we could use a simple `Flex`
-  if (hasErrorMsgAndIsGroup) {
+  if (isGroup) {
     return `${hasVisibleLabel ? ' "label"' : ''}
             ${hasMessages ? ' "messages"' : ''}
             "controls"`;
@@ -71,22 +67,19 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
     vAlign,
     labelAlign,
     margin,
-    messages
-  } = params;
-  const {
     hasMessages,
+    hasVisibleMessage,
     hasVisibleLabel,
-    hasErrorMsgAndIsGroup
+    isGroup
   } = params;
   const cssMargin = (0, _emotion.calcSpacingFromShorthand)(margin, {
     ...sharedTokens.spacing,
     ...sharedTokens.legacy.spacing
   });
   const isInlineLayout = layout === 'inline';
-  const hasNonEmptyMessages = messages?.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);
 
   // This is quite ugly, we should simplify it
-  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages);
+  const gridTemplateAreas = generateGridLayout(isInlineLayout, isGroup, hasVisibleLabel, hasMessages);
   let gridTemplateColumns = '100%'; // stacked layout
   if (isInlineLayout) {
     gridTemplateColumns = '1fr 3fr';
@@ -141,10 +134,10 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       [`@media screen and (width < ${sharedTokens.breakpoints.md})`]: {
         // for small screens use the stacked layout
         gridTemplateColumns: '100%',
-        gridTemplateAreas: generateGridLayout(false, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
+        gridTemplateAreas: generateGridLayout(false, isGroup, hasVisibleLabel, hasMessages)
       },
       columnGap: '0.375rem',
-      rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
+      rowGap: hasVisibleMessage ? componentTheme.gapPrimitives : '0',
       width: '100%',
       ...(inline && {
         display: 'inline-grid',
@@ -157,15 +150,11 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(label)': labelStyles,
       '&:-webkit-any(label)': labelStyles,
-      paddingBottom: hasNonEmptyMessages ? '0' : componentTheme.gapPrimitives
+      paddingBottom: hasVisibleMessage ? '0' : componentTheme.gapPrimitives
     },
     formFieldChildren: {
       label: 'formFieldLayout__children',
       gridArea: 'controls',
-      // add a small margin between the message and the controls
-      ...(hasMessages && hasErrorMsgAndIsGroup && {
-        marginTop: '0.375rem'
-      }),
       ...(isInlineLayout && inline && {
         [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {
           justifySelf: 'start'

package/lib/FormFieldMessages/v2/index.js

@@ -74,6 +74,8 @@ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withSty
       messages,
       styles
     } = this.props;
+    // TODO try to only use this component in FormFieldLayout, then
+    // we could move a proper hasMessages logic here (see FormFieldLayout)
     return messages && messages.length > 0 ? (0, _jsxRuntime.jsx)("div", {
       css: styles?.formFieldMessages,
       ...(0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps),
@@ -85,7 +87,7 @@ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withSty
             variant: msg.type,
             children: msg.text
           })
-        }, `error${i}`);
+        }, `FormFieldMessage${i}`);
       })
     }) : null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "11.7.8-snapshot-9",
+  "version": "11.7.8-snapshot-10",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.8-snapshot-9",
-    "@instructure/console": "11.7.8-snapshot-9",
-    "@instructure/shared-types": "11.7.8-snapshot-9",
-    "@instructure/ui-a11y-utils": "11.7.8-snapshot-9",
-    "@instructure/ui-a11y-content": "11.7.8-snapshot-9",
-    "@instructure/ui-grid": "11.7.8-snapshot-9",
-    "@instructure/ui-icons": "11.7.8-snapshot-9",
-    "@instructure/ui-react-utils": "11.7.8-snapshot-9",
-    "@instructure/ui-utils": "11.7.8-snapshot-9",
-    "@instructure/uid": "11.7.8-snapshot-9",
-    "@instructure/ui-themes": "11.7.8-snapshot-9"
+    "@instructure/emotion": "11.7.8-snapshot-10",
+    "@instructure/console": "11.7.8-snapshot-10",
+    "@instructure/ui-a11y-content": "11.7.8-snapshot-10",
+    "@instructure/shared-types": "11.7.8-snapshot-10",
+    "@instructure/ui-a11y-utils": "11.7.8-snapshot-10",
+    "@instructure/ui-grid": "11.7.8-snapshot-10",
+    "@instructure/ui-react-utils": "11.7.8-snapshot-10",
+    "@instructure/ui-icons": "11.7.8-snapshot-10",
+    "@instructure/ui-utils": "11.7.8-snapshot-10",
+    "@instructure/uid": "11.7.8-snapshot-10",
+    "@instructure/ui-themes": "11.7.8-snapshot-10"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-babel-preset": "11.7.8-snapshot-9",
-    "@instructure/ui-axe-check": "11.7.8-snapshot-9"
+    "@instructure/ui-axe-check": "11.7.8-snapshot-10",
+    "@instructure/ui-babel-preset": "11.7.8-snapshot-10"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/FormFieldLayout/v2/index.tsx

@@ -81,27 +81,32 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
           )
         : messages
 
-    // Compute style props
-    const hasMessages =
-      filteredMessages && filteredMessages.length > 0
-        ? filteredMessages.some((msg) => {
-            if (msg.text) {
-              if (typeof msg.text === 'string') {
-                return msg.text.length > 0
+    // any message, even if it's not visible (screenreader only)
+    let hasMessages = false
+    let hasVisibleMessage = false
+    if (filteredMessages) {
+      for (const msg of filteredMessages) {
+        if (msg.text) {
+          if (typeof msg.text === 'string') {
+            if (msg.text.length > 0) {
+              hasMessages = true
+              if (msg.type !== 'screenreader-only') {
+                hasVisibleMessage = true
               }
-              return true
             }
-            return false
-          })
-        : false
+          } else {
+            // if the message is a React component we just assume its non-empty
+            hasMessages = true
+            if (msg.type !== 'screenreader-only') {
+              hasVisibleMessage = true
+            }
+          }
+        }
+      }
+    }
 
     const hasVisibleLabel = label ? hasVisibleChildren(label) : false
 
-    const hasErrorMsgAndIsGroup =
-      !!filteredMessages?.find(
-        (m) => m.type === 'error' || m.type === 'newError'
-      ) && !!isGroup
-
     const invalid = !!filteredMessages?.find(
       (m) => m.type === 'error' || m.type === 'newError'
     )
@@ -113,13 +118,13 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
       params: {
         hasMessages,
         hasVisibleLabel,
-        hasErrorMsgAndIsGroup,
+        hasVisibleMessage,
+        isGroup: !!isGroup,
         inline,
         layout,
         vAlign,
         labelAlign,
         margin,
-        messages: filteredMessages,
         isRequired,
         invalid
       },
@@ -204,7 +209,7 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
       } else return null
     }
 
-    const renderVisibleMessages = () => {
+    const renderMessages = () => {
       return hasMessages ? (
         <FormFieldMessages
           id={messagesId}
@@ -224,11 +229,11 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
         ref={handleRef}
       >
         {renderLabel()}
-        {hasErrorMsgAndIsGroup && renderVisibleMessages()}
+        {isGroup && renderMessages()}
         <span css={styles?.formFieldChildren} ref={handleInputContainerRef}>
           {children}
         </span>
-        {!hasErrorMsgAndIsGroup && renderVisibleMessages()}
+        {!isGroup && renderMessages()}
       </ElementType>
     )
   }

package/src/FormFieldLayout/v2/props.ts

@@ -151,8 +151,9 @@ const allowedProps: AllowedPropKeys = [
 
 type FormFieldStyleProps = {
   hasMessages: boolean
+  hasVisibleMessage: boolean
   hasVisibleLabel: boolean
-  hasErrorMsgAndIsGroup: boolean
+  isGroup: boolean
 }
 
 export type {

package/src/FormFieldLayout/v2/styles.ts

@@ -36,32 +36,27 @@ type StyleParams = FormFieldStyleProps & {
   vAlign: FormFieldLayoutProps['vAlign']
   labelAlign: FormFieldLayoutProps['labelAlign']
   margin: FormFieldLayoutProps['margin']
-  messages: FormFieldLayoutProps['messages']
   isRequired: FormFieldLayoutProps['isRequired']
   invalid: boolean
 }
 
 const generateGridLayout = (
   isInlineLayout: boolean,
-  hasErrorMsgAndIsGroup: boolean,
+  isGroup: boolean,
   hasVisibleLabel: boolean,
   hasMessages: boolean
 ) => {
   if (isInlineLayout) {
-    if (hasErrorMsgAndIsGroup) {
-      if (hasMessages) {
-        return `${hasVisibleLabel ? ' "label messages"' : '. messages'}
-                                      ". controls"`
-      } else {
-        return `${hasVisibleLabel ? ' "label controls"' : '. controls'}`
-      }
+    if (isGroup && hasMessages) {
+      return `${hasVisibleLabel ? ' "label messages"' : '". messages"'}
+              ${hasVisibleLabel ? ' "label controls"' : '". controls"'}`
     } else {
-      return `${hasVisibleLabel ? ' "label controls"' : '. controls'}
+      return `${hasVisibleLabel ? ' "label controls"' : '". controls"'}
               ${hasMessages ? ' ". messages"' : ''}`
     }
   }
   // stacked layout -- in this case we could use a simple `Flex`
-  if (hasErrorMsgAndIsGroup) {
+  if (isGroup) {
     return `${hasVisibleLabel ? ' "label"' : ''}
             ${hasMessages ? ' "messages"' : ''}
             "controls"`
@@ -86,23 +81,27 @@ const generateStyle = (
   params: StyleParams,
   sharedTokens: SharedTokens
 ): FormFieldLayoutStyle => {
-  const { inline, layout, vAlign, labelAlign, margin, messages } = params
-  const { hasMessages, hasVisibleLabel, hasErrorMsgAndIsGroup } = params
+  const {
+    inline,
+    layout,
+    vAlign,
+    labelAlign,
+    margin,
+    hasMessages,
+    hasVisibleMessage,
+    hasVisibleLabel,
+    isGroup
+  } = params
   const cssMargin = calcSpacingFromShorthand(margin, {
     ...sharedTokens.spacing,
     ...sharedTokens.legacy.spacing
   })
   const isInlineLayout = layout === 'inline'
 
-  const hasNonEmptyMessages = messages?.reduce(
-    (acc, message) => acc || message.type !== 'screenreader-only',
-    false
-  )
-
   // This is quite ugly, we should simplify it
   const gridTemplateAreas = generateGridLayout(
     isInlineLayout,
-    hasErrorMsgAndIsGroup,
+    isGroup,
     hasVisibleLabel,
     hasMessages
   )
@@ -162,13 +161,13 @@ const generateStyle = (
         gridTemplateColumns: '100%',
         gridTemplateAreas: generateGridLayout(
           false,
-          hasErrorMsgAndIsGroup,
+          isGroup,
           hasVisibleLabel,
           hasMessages
         )
       },
       columnGap: '0.375rem',
-      rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
+      rowGap: hasVisibleMessage ? componentTheme.gapPrimitives : '0',
       width: '100%',
       ...(inline && {
         display: 'inline-grid',
@@ -181,14 +180,11 @@ const generateStyle = (
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(label)': labelStyles,
       '&:-webkit-any(label)': labelStyles,
-
-      paddingBottom: hasNonEmptyMessages ? '0' : componentTheme.gapPrimitives
+      paddingBottom: hasVisibleMessage ? '0' : componentTheme.gapPrimitives
     },
     formFieldChildren: {
       label: 'formFieldLayout__children',
       gridArea: 'controls',
-      // add a small margin between the message and the controls
-      ...(hasMessages && hasErrorMsgAndIsGroup && { marginTop: '0.375rem' }),
       ...(isInlineLayout &&
         inline && {
           [`@media screen and (width >= ${sharedTokens.breakpoints.md})`]: {

package/src/FormFieldMessages/v2/index.tsx

@@ -77,7 +77,8 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
 
   render() {
     const { messages, styles } = this.props
-
+    // TODO try to only use this component in FormFieldLayout, then
+    // we could move a proper hasMessages logic here (see FormFieldLayout)
     return messages && messages.length > 0 ? (
       <div
         css={styles?.formFieldMessages}
@@ -86,7 +87,7 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
       >
         {messages.map((msg, i) => {
           return (
-            <span key={`error${i}`} css={styles?.message}>
+            <span key={`FormFieldMessage${i}`} css={styles?.message}>
               <FormFieldMessage variant={msg.type}>{msg.text}</FormFieldMessage>
             </span>
           )