diff --git a/components/form.js b/components/form.js
index 221fe52b..c51e587b 100644
--- a/components/form.js
+++ b/components/form.js
@@ -526,8 +526,8 @@ function InputInner ({
 
   const [showClearButton, setShowClearButton] = useState(clear)
   useEffect(() => {
-    setShowClearButton(clear && field.value)
-  }, [field.value])
+    setShowClearButton(clear && field.value && !props.readOnly)
+  }, [field.value, props.readOnly])
 
   return (
     <>