diff --git a/.changeset/clever-laws-smile.md b/.changeset/clever-laws-smile.md
new file mode 100644
index 0000000000..217daefd1a
--- /dev/null
+++ b/.changeset/clever-laws-smile.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': patch
+---
+
+Correctly sets the `readOnly` prop in the `useFormFieldProps` hook. Previously, `readOnly` was only added to an input if `disabled` was true. Now, passing the `readOnly` prop adds it to the resulting input.
diff --git a/.changeset/eight-clocks-laugh.md b/.changeset/eight-clocks-laugh.md
new file mode 100644
index 0000000000..d7d9889378
--- /dev/null
+++ b/.changeset/eight-clocks-laugh.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/text-input': patch
+---
+
+Passes `readOnly` prop to `<FormField>` so that it correctly sets the `readOnly` prop.
diff --git a/packages/date-picker/src/DatePicker.stories.tsx b/packages/date-picker/src/DatePicker.stories.tsx
index c56af42b6f..703672d92a 100644
--- a/packages/date-picker/src/DatePicker.stories.tsx
+++ b/packages/date-picker/src/DatePicker.stories.tsx
@@ -142,6 +142,11 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
     </div>
   );
 };
+LiveExample.parameters = {
+  chromatic: {
+    disableSnapshots: true,
+  },
+};
 
 export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
   return <DatePicker {...props} />;
diff --git a/packages/form-field/src/FormField.spec.tsx b/packages/form-field/src/FormField.spec.tsx
index d5a65afa78..7c5f2e1552 100644
--- a/packages/form-field/src/FormField.spec.tsx
+++ b/packages/form-field/src/FormField.spec.tsx
@@ -544,6 +544,49 @@ describe('packages/form-field', () => {
     expect(label.getAttribute('for')).toBe(id);
   });
 
+  describe('readonly', () => {
+    test('input has readonly prop', () => {
+      const { getByTestId } = render(
+        <FormField label="Label" data-testid="form-field" readOnly>
+          <FormFieldInputContainer>
+            <div data-testid="input" />
+          </FormFieldInputContainer>
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('readonly');
+    });
+
+    test('disabled overrides readOnly prop', () => {
+      const { getByTestId } = render(
+        <FormField
+          label="Label"
+          data-testid="form-field"
+          readOnly={false}
+          disabled
+        >
+          <FormFieldInputContainer>
+            <div data-testid="input" />
+          </FormFieldInputContainer>
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('readonly');
+    });
+
+    test('input does not have readonly prop', () => {
+      const { getByTestId } = render(
+        <FormField label="Label" data-testid="form-field" readOnly={false}>
+          <FormFieldInputContainer>
+            <div data-testid="input" />
+          </FormFieldInputContainer>
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(
diff --git a/packages/form-field/src/FormField/FormField.types.ts b/packages/form-field/src/FormField/FormField.types.ts
index 73c1811341..51f5843bd2 100644
--- a/packages/form-field/src/FormField/FormField.types.ts
+++ b/packages/form-field/src/FormField/FormField.types.ts
@@ -98,4 +98,9 @@ export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
      * Whether or not the field is labeled as optional.
      */
     optional?: boolean;
+
+    /**
+     * Whether or not the field is readonly.
+     */
+    readOnly?: boolean;
   };
diff --git a/packages/form-field/src/FormField/useFormFieldProps.ts b/packages/form-field/src/FormField/useFormFieldProps.ts
index 01577c64a5..fac755d1f7 100644
--- a/packages/form-field/src/FormField/useFormFieldProps.ts
+++ b/packages/form-field/src/FormField/useFormFieldProps.ts
@@ -54,7 +54,7 @@ export const useFormFieldProps = ({
     'aria-describedby': ariaDescribedby,
     'aria-label': ariaLabel,
     'aria-disabled': disabled,
-    readOnly: disabled,
+    readOnly: rest.readOnly ? rest.readOnly : disabled,
     'aria-invalid': ariaInvalid,
   };
 
diff --git a/packages/text-input/src/TextInput/TextInput.tsx b/packages/text-input/src/TextInput/TextInput.tsx
index 066058a4b9..a491fb92d0 100644
--- a/packages/text-input/src/TextInput/TextInput.tsx
+++ b/packages/text-input/src/TextInput/TextInput.tsx
@@ -59,6 +59,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       state = State.None,
       type = TextInputType.Text,
       id,
+      readOnly,
       value: controlledValue,
       className,
       darkMode: darkModeProp,
@@ -158,6 +159,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       optional,
       size,
       state,
+      readOnly,
       ...ariaProps,
     } as const;