diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js
index 5c57e1ca5ae..ed9959ba57c 100644
--- a/src-docs/src/views/inline_edit/inline_edit_example.js
+++ b/src-docs/src/views/inline_edit/inline_edit_example.js
@@ -30,6 +30,14 @@ const inlineEditTitleSnippet = `<EuiInlineEditTitle
   size="m"
 />`;
 
+import InlineEditPlaceholder from './inline_edit_placeholder';
+const inlineEditPlaceholderSource = require('!!raw-loader!./inline_edit_placeholder');
+const inlineEditPlaceholderSnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline"
+  defaultValue="This is placeholder text"
+  displayDefaultValueAsPlaceholder={true}
+/>`;
+
 import InlineEditSave from './inline_edit_save';
 const inlineEditSaveSource = require('!!raw-loader!././inline_edit_save');
 const inlineEditModeSaveSnippet = `<EuiInlineEditText
@@ -144,6 +152,26 @@ export const InlineEditExample = {
       snippet: inlineEditTitleSnippet,
       playground: inlineEditTitleConfig,
     },
+    {
+      title: 'Setting a placeholder',
+      text: (
+        <>
+          <p>
+            Use the <EuiCode>displayDefaultValueAsPlaceholder</EuiCode> property
+            to add a placeholder to the input form control in edit mode. When a
+            value has successfully been saved, the placeholder will be removed.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: inlineEditPlaceholderSource,
+        },
+      ],
+      demo: <InlineEditPlaceholder />,
+      snippet: inlineEditPlaceholderSnippet,
+    },
     {
       title: 'Saving edited text',
       text: (
diff --git a/src-docs/src/views/inline_edit/inline_edit_placeholder.tsx b/src-docs/src/views/inline_edit/inline_edit_placeholder.tsx
new file mode 100644
index 00000000000..504ac14043d
--- /dev/null
+++ b/src-docs/src/views/inline_edit/inline_edit_placeholder.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+  EuiInlineEditText,
+  EuiInlineEditTitle,
+  EuiSpacer,
+} from '../../../../src';
+
+export default () => {
+  return (
+    <>
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue=""
+        placeholder="Hello!"
+      />
+
+      <EuiSpacer />
+
+      <EuiInlineEditTitle
+        heading="h3"
+        inputAriaLabel="Edit title inline"
+        defaultValue=""
+        placeholder="hey!"
+      />
+    </>
+  );
+};
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 49ca1c0f88e..78b9fe4c0b9 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -1,5 +1,92 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiInlineEditForm edit mode displayDefaultValueAsPlaceholder 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+  >
+    <div
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
+    >
+      <div
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
+      >
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          >
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFieldText--fullWidth"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                placeholder="Hello World!"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
+      <div
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <button
+            aria-label="Save edit"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-success"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Cancel edit"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-danger"
+            data-test-subj="euiInlineEditModeCancelButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiInlineEditForm edit mode editModeProps.cancelButtonProps 1`] = `
 <div
   class="euiInlineEdit testClass1 testClass2"
@@ -649,7 +736,7 @@ exports[`EuiInlineEditForm read mode isReadOnly 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1xic7s3-empty-disabled-euiInlineEditReadMode-isReadOnly"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1xkbuye-empty-disabled-euiInlineEditReadMode-isReadOnly"
     data-test-subj="euiInlineReadModeButton"
     disabled=""
     type="button"
@@ -677,7 +764,7 @@ exports[`EuiInlineEditForm read mode readModeProps 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1e81xrj-empty-primary-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-qy41x6-empty-primary-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -711,7 +798,7 @@ exports[`EuiInlineEditForm read mode renders 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -745,7 +832,7 @@ exports[`EuiInlineEditForm read mode sizes 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
index 460ed4ee2a0..0471860a700 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
@@ -1,12 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiInlineEditText displayDefaultValueAsPlaceholder 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
+>
+  <button
+    aria-describedby="inlineEdit_generated-id"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1vmjhy7-empty-text-euiInlineEditReadMode-hasPlaceholder"
+    data-test-subj="euiInlineReadModeButton"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <div
+          class="euiText eui-textTruncate emotion-euiText-m"
+        >
+          Hello World!
+        </div>
+      </span>
+    </span>
+  </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click to edit this text inline.
+  </span>
+</div>
+`;
+
 exports[`EuiInlineEditText isReadOnly 1`] = `
 <div
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1xic7s3-empty-disabled-euiInlineEditReadMode-isReadOnly"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1xkbuye-empty-disabled-euiInlineEditReadMode-isReadOnly"
     data-test-subj="euiInlineReadModeButton"
     disabled=""
     role="paragraph"
@@ -39,7 +77,7 @@ exports[`EuiInlineEditText renders 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -77,7 +115,7 @@ exports[`EuiInlineEditText text sizes renders m 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -115,7 +153,7 @@ exports[`EuiInlineEditText text sizes renders s 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -153,7 +191,7 @@ exports[`EuiInlineEditText text sizes renders xs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index 8c14a849bec..8e7c0da672e 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -1,5 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiInlineEditTitle displayDefaultValueAsPlaceholder 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
+>
+  <button
+    aria-describedby="inlineEdit_generated-id"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1vmjhy7-empty-text-euiInlineEditReadMode-hasPlaceholder"
+    data-test-subj="euiInlineReadModeButton"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-m"
+        >
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click to edit this text inline.
+  </span>
+</div>
+`;
+
 exports[`EuiInlineEditTitle isReadOnly 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
@@ -7,7 +45,7 @@ exports[`EuiInlineEditTitle isReadOnly 1`] = `
   <button
     aria-describedby="inlineEdit_generated-id"
     aria-level="1"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1xic7s3-empty-disabled-euiInlineEditReadMode-isReadOnly"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1xkbuye-empty-disabled-euiInlineEditReadMode-isReadOnly"
     data-test-subj="euiInlineReadModeButton"
     disabled=""
     role="heading"
@@ -41,7 +79,7 @@ exports[`EuiInlineEditTitle renders 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -79,7 +117,7 @@ exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -117,7 +155,7 @@ exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -155,7 +193,7 @@ exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -193,7 +231,7 @@ exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -231,7 +269,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -269,7 +307,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-i2vcrr-empty-text-euiInlineEditReadMode"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-1j2im8v-empty-text-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
diff --git a/src/components/inline_edit/inline_edit_form.styles.ts b/src/components/inline_edit/inline_edit_form.styles.ts
index 62fbc70c24e..6bdffaad9cf 100644
--- a/src/components/inline_edit/inline_edit_form.styles.ts
+++ b/src/components/inline_edit/inline_edit_form.styles.ts
@@ -22,5 +22,13 @@ export const euiInlineEditReadModeStyles = ({ euiTheme }: UseEuiTheme) => {
         user-select: text;
       }
     `,
+
+    hasPlaceholder: css`
+      &.euiButtonEmpty .euiText,
+      &.euiButtonEmpty .euiTitle {
+        font-style: italic;
+        color: ${euiTheme.colors.subduedText};
+      }
+    `,
   };
 };
diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index 8d51e56c50d..4c4891ee581 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -202,6 +202,24 @@ describe('EuiInlineEditForm', () => {
         getByTestSubject('euiInlineEditModeInput').hasAttribute('aria-invalid')
       ).toBeTruthy();
     });
+
+    test('displayDefaultValueAsPlaceholder', () => {
+      const { container, getByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          displayDefaultValueAsPlaceholder={true}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(
+        getByTestSubject('euiInlineEditModeInput').getAttribute('placeholder')
+      ).toBeTruthy();
+      expect(
+        getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+      ).toBeFalsy();
+    });
   });
 
   describe('toggling between read mode and edit mode', () => {
@@ -448,6 +466,77 @@ describe('EuiInlineEditForm', () => {
         expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
         expect(getByText('New message!')).toBeTruthy();
       });
+
+      it('the placeholder remains on the editMode from control if the text edit is cancelled', () => {
+        const { getByTestSubject } = render(
+          <EuiInlineEditForm
+            {...commonInlineEditFormProps}
+            startWithEditOpen={true}
+            displayDefaultValueAsPlaceholder={true}
+          />
+        );
+
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('placeholder')
+        ).toBeTruthy();
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+        ).toBeFalsy();
+
+        fireEvent.click(getByTestSubject('euiInlineEditModeCancelButton'));
+
+        waitFor(() => {
+          expect(document.activeElement).toEqual(
+            getByTestSubject('euiInlineReadModeButton')
+          );
+        });
+
+        fireEvent.click(getByTestSubject('euiInlineReadModeButton'));
+
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('placeholder')
+        ).toBeTruthy();
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+        ).toBeFalsy();
+      });
+
+      it('removes the placeholder from the editMode form control after the first successful save', () => {
+        const { getByTestSubject } = render(
+          <EuiInlineEditForm
+            {...commonInlineEditFormProps}
+            startWithEditOpen={true}
+            displayDefaultValueAsPlaceholder={true}
+          />
+        );
+
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('placeholder')
+        ).toBeTruthy();
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+        ).toBeFalsy();
+
+        fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+          target: { value: 'New message!' },
+        });
+        fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+        waitFor(() => {
+          expect(document.activeElement).toEqual(
+            getByTestSubject('euiInlineReadModeButton')
+          );
+        });
+
+        fireEvent.click(getByTestSubject('euiInlineReadModeButton'));
+
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('placeholder')
+        ).toBeFalsy();
+        expect(
+          getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+        ).toBeTruthy();
+      });
     });
   });
 });
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 3793f5e5213..623cd1eec4e 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -40,6 +40,7 @@ import { euiInlineEditReadModeStyles } from './inline_edit_form.styles';
 export type EuiInlineEditCommonProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     defaultValue: string;
+    placeholder?: string;
     /**
      * Callback that fires when a user clicks the save button.
      * Passes the current edited text value as an argument.
@@ -121,6 +122,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   children,
   sizes,
   defaultValue,
+  placeholder,
   inputAriaLabel,
   startWithEditOpen,
   readModeProps,
@@ -134,12 +136,6 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
 
   const euiTheme = useEuiTheme();
 
-  const readModeStyles = euiInlineEditReadModeStyles(euiTheme);
-  const readModeCssStyles = [
-    readModeStyles.euiInlineEditReadMode,
-    isReadOnly && readModeStyles.isReadOnly,
-  ];
-
   const { controlHeight, controlCompressedHeight } = euiFormVariables(euiTheme);
   const loadingSkeletonSize = sizes.compressed
     ? controlCompressedHeight
@@ -168,9 +164,21 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
     editModeProps?.inputProps?.inputRef,
   ]);
 
+  const [showPlaceholder, setShowPlaceholder] = useState(
+    placeholder && !defaultValue
+  );
   const [isEditing, setIsEditing] = useState(false || startWithEditOpen);
   const [editModeValue, setEditModeValue] = useState(defaultValue);
-  const [readModeValue, setReadModeValue] = useState(defaultValue);
+  const [readModeValue, setReadModeValue] = useState(
+    showPlaceholder ? placeholder : defaultValue
+  );
+
+  const readModeStyles = euiInlineEditReadModeStyles(euiTheme);
+  const readModeCssStyles = [
+    readModeStyles.euiInlineEditReadMode,
+    isReadOnly && readModeStyles.isReadOnly,
+    showPlaceholder && readModeStyles.hasPlaceholder,
+  ];
 
   const activateEditMode = () => {
     setIsEditing(true);
@@ -179,7 +187,10 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   };
 
   const cancelInlineEdit = () => {
-    setEditModeValue(readModeValue);
+    // If placeholder is active and a save is cancelled, return edit mode value to an empty string
+    readModeValue && !showPlaceholder
+      ? setEditModeValue(readModeValue)
+      : setEditModeValue('');
     setIsEditing(false);
     requestAnimationFrame(() => readModeFocusRef.current?.focus());
   };
@@ -193,6 +204,8 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       if (awaitedReturn === false) return;
     }
 
+    // If placeholder is active and a value is saved, stop displaying placeholder styles
+    showPlaceholder && setShowPlaceholder(false);
     setReadModeValue(editModeValue);
     setIsEditing(false);
     requestAnimationFrame(() => readModeFocusRef.current?.focus());
@@ -234,6 +247,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
             isInvalid={isInvalid}
             isLoading={isLoading}
             data-test-subj="euiInlineEditModeInput"
+            placeholder={placeholder}
             {...editModeProps?.inputProps}
             inputRef={setEditModeRefs}
             onChange={(e) => {
diff --git a/src/components/inline_edit/inline_edit_text.test.tsx b/src/components/inline_edit/inline_edit_text.test.tsx
index 4c6fc2ceefd..f481ee997e9 100644
--- a/src/components/inline_edit/inline_edit_text.test.tsx
+++ b/src/components/inline_edit/inline_edit_text.test.tsx
@@ -41,6 +41,17 @@ describe('EuiInlineEditText', () => {
     );
   });
 
+  test('displayDefaultValueAsPlaceholder', () => {
+    const { container } = render(
+      <EuiInlineEditText
+        displayDefaultValueAsPlaceholder={true}
+        {...inlineEditTextProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   describe('text sizes', () => {
     // Remove 'relative' from text sizes available for EuiInlineEditText
     const availableTextSizes = TEXT_SIZES.filter((size) => size !== 'relative');
diff --git a/src/components/inline_edit/inline_edit_title.test.tsx b/src/components/inline_edit/inline_edit_title.test.tsx
index 6de83071e6c..9b9026281c2 100644
--- a/src/components/inline_edit/inline_edit_title.test.tsx
+++ b/src/components/inline_edit/inline_edit_title.test.tsx
@@ -56,6 +56,17 @@ describe('EuiInlineEditTitle', () => {
     );
   });
 
+  test('displayDefaultValueAsPlaceholder', () => {
+    const { container } = render(
+      <EuiInlineEditTitle
+        displayDefaultValueAsPlaceholder={true}
+        {...inlineEditTitleProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   describe('title sizes', () => {
     TITLE_SIZES.forEach((size) => {
       it(`renders size ${size}`, () => {