diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx
index 0067164f425..050741455e9 100644
--- a/packages/@react-spectrum/searchfield/src/SearchField.tsx
+++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx
@@ -25,8 +25,8 @@ import {useSearchFieldState} from '@react-stately/searchfield';
 function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRef>) {
   props = useProviderProps(props);
   let defaultIcon = (
-    <Magnifier 
-      data-testid="searchicon" 
+    <Magnifier
+      data-testid="searchicon"
       UNSAFE_className={
         classNames(
           styles,
@@ -86,7 +86,7 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
       icon={icon}
       onChange={state.setValue}
       value={state.value}
-      wrapperChildren={state.value !== '' && clearButton} />
+      wrapperChildren={(state.value !== '' && !props.isReadOnly) && clearButton} />
   );
 }
 
diff --git a/packages/@react-spectrum/searchfield/test/SearchField.test.js b/packages/@react-spectrum/searchfield/test/SearchField.test.js
index 283bde99ab2..790f49e30f7 100644
--- a/packages/@react-spectrum/searchfield/test/SearchField.test.js
+++ b/packages/@react-spectrum/searchfield/test/SearchField.test.js
@@ -273,4 +273,11 @@ describe('Search', () => {
       expect(onClear).toBeCalledTimes(0);
     }
   });
+
+  it('SearchField doesn\'t show clear button if isReadOnly is true', () => {
+    let tree = render(<SearchField isReadOnly value="puppy" />);
+    let clearButton = tree.queryByLabelText('Clear search');
+    expect(clearButton).toBe(null);
+
+  });
 });