diff --git a/change/@fluentui-react-field-fe73a1e2-7458-4f5a-8262-01dcd3bb507f.json b/change/@fluentui-react-field-fe73a1e2-7458-4f5a-8262-01dcd3bb507f.json
new file mode 100644
index 00000000000000..da91f4e66c5ad0
--- /dev/null
+++ b/change/@fluentui-react-field-fe73a1e2-7458-4f5a-8262-01dcd3bb507f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Field should have block layout, not inline",
+  "packageName": "@fluentui/react-field",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-field/etc/react-field.api.md b/packages/react-components/react-field/etc/react-field.api.md
index 3290a5408a8c19..06c25baafdec4a 100644
--- a/packages/react-components/react-field/etc/react-field.api.md
+++ b/packages/react-components/react-field/etc/react-field.api.md
@@ -66,9 +66,9 @@ export type FieldSlots<T extends FieldComponent> = {
     root: NonNullable<Slot<'div'>>;
     control: SlotComponent<T>;
     label?: Slot<typeof Label>;
-    validationMessage?: Slot<'span'>;
+    validationMessage?: Slot<'div'>;
     validationMessageIcon?: Slot<'span'>;
-    hint?: Slot<'span'>;
+    hint?: Slot<'div'>;
 };
 
 // @public
diff --git a/packages/react-components/react-field/src/components/Field/Field.types.ts b/packages/react-components/react-field/src/components/Field/Field.types.ts
index 671521b080aefe..6ddc8d99e46fa6 100644
--- a/packages/react-components/react-field/src/components/Field/Field.types.ts
+++ b/packages/react-components/react-field/src/components/Field/Field.types.ts
@@ -35,7 +35,7 @@ export type FieldSlots<T extends FieldComponent> = {
   /**
    * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
    */
-  validationMessage?: Slot<'span'>;
+  validationMessage?: Slot<'div'>;
 
   /**
    * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
@@ -48,7 +48,7 @@ export type FieldSlots<T extends FieldComponent> = {
   /**
    * Additional hint text below the field.
    */
-  hint?: Slot<'span'>;
+  hint?: Slot<'div'>;
 };
 
 /**
diff --git a/packages/react-components/react-field/src/components/Field/useField.tsx b/packages/react-components/react-field/src/components/Field/useField.tsx
index 10b553559afe91..6a6c7af10bc440 100644
--- a/packages/react-components/react-field/src/components/Field/useField.tsx
+++ b/packages/react-components/react-field/src/components/Field/useField.tsx
@@ -140,9 +140,9 @@ export const useField_unstable = <T extends FieldComponent>(
       root: 'div',
       control: params.component,
       label: Label,
-      validationMessage: 'span',
+      validationMessage: 'div',
       validationMessageIcon: 'span',
-      hint: 'span',
+      hint: 'div',
     },
     root,
     control,
diff --git a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts b/packages/react-components/react-field/src/components/Field/useFieldStyles.ts
index e8261946109cfc..005ac098c88536 100644
--- a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts
+++ b/packages/react-components/react-field/src/components/Field/useFieldStyles.ts
@@ -17,7 +17,7 @@ export const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<Fiel
  */
 const useRootStyles = makeStyles({
   base: {
-    display: 'inline-grid',
+    display: 'grid',
     gridAutoFlow: 'row',
     justifyItems: 'start',
   },
diff --git a/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx
index fd6e9c66e1cbd7..06023c87563677 100644
--- a/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx
+++ b/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx
@@ -4,7 +4,7 @@ import { InputField } from '@fluentui/react-field';
 
 const useStyles = makeStyles({
   stack: {
-    display: 'inline-grid',
+    display: 'grid',
     rowGap: tokens.spacingVerticalM,
     width: '400px',
   },
diff --git a/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx
index 7ad08b50c362d7..9cd39ab5d22216 100644
--- a/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx
+++ b/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx
@@ -4,7 +4,7 @@ import { InputField } from '@fluentui/react-field';
 
 const useStyles = makeStyles({
   stack: {
-    display: 'inline-grid',
+    display: 'grid',
     rowGap: tokens.spacingVerticalM,
     width: '400px',
   },
diff --git a/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx
index 333666e2bed275..c3c9560e13636e 100644
--- a/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx
+++ b/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx
@@ -5,7 +5,7 @@ import { SparkleFilled } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   stack: {
-    display: 'inline-grid',
+    display: 'grid',
     rowGap: tokens.spacingVerticalM,
     width: '400px',
   },