diff --git a/src-docs/src/views/inline_edit/inline_edit_text.tsx b/src-docs/src/views/inline_edit/inline_edit_text.tsx
index df4657d17b2..a420814ce9a 100644
--- a/src-docs/src/views/inline_edit/inline_edit_text.tsx
+++ b/src-docs/src/views/inline_edit/inline_edit_text.tsx
@@ -5,6 +5,7 @@ import {
   EuiSpacer,
   EuiButtonGroup,
   EuiInlineEditTextSizes,
+  EuiCheckbox,
 } from '../../../../src';
 
 export default () => {
@@ -27,6 +28,12 @@ export default () => {
     EuiInlineEditTextSizes
   >('m');
 
+  const [isInvalidChecked, setIsInvalidChecked] = useState(false);
+  const [isLoadingChecked, setIsLoadingChecked] = useState(false);
+
+  const toggleIsInvalid = (e: any) => setIsInvalidChecked(e.target.checked);
+  const toggleisLoading = (e: any) => setIsLoadingChecked(e.target.checked);
+
   const textSizeOnChange = (optionId: EuiInlineEditTextSizes) => {
     setToggleTextButtonSize(optionId);
   };
@@ -42,10 +49,28 @@ export default () => {
 
       <EuiSpacer />
 
+      <EuiCheckbox
+        id="isInvalidCheckbox"
+        label="Toggle Validation"
+        checked={isInvalidChecked}
+        onChange={(e) => toggleIsInvalid(e)}
+      />
+
+      <EuiCheckbox
+        id="isLoadingChecbox"
+        label="Toggle Loading State"
+        checked={isLoadingChecked}
+        onChange={(e) => toggleisLoading(e)}
+      />
+
+      <EuiSpacer />
+
       <EuiInlineEditText
         inputAriaLabel="Edit text inline"
         defaultValue="Hello World!"
         size={toggleTextButtonSize}
+        isInvalid={isInvalidChecked}
+        isLoading={isLoadingChecked}
       />
     </>
   );