diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index d74e4cfb91a..cd059d09dbc 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -149,6 +149,8 @@ import { IconExample } from './views/icon/icon_example';
 
 import { ImageExample } from './views/image/image_example';
 
+import { InlineEditExample } from './views/inline_edit/inline_edit_example';
+
 import { InnerTextExample } from './views/inner_text/inner_text_example';
 
 import { KeyPadMenuExample } from './views/key_pad_menu/key_pad_menu_example';
@@ -557,6 +559,7 @@ const navigation = [
       HealthExample,
       IconExample,
       ImageExample,
+      InlineEditExample,
       ListGroupExample,
       LoadingExample,
       NotificationEventExample,
diff --git a/src-docs/src/views/inline_edit/inline_edit.tsx b/src-docs/src/views/inline_edit/inline_edit.tsx
new file mode 100644
index 00000000000..b26cf525ac2
--- /dev/null
+++ b/src-docs/src/views/inline_edit/inline_edit.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+
+import {
+  EuiInlineEdit,
+  EuiFieldText,
+  EuiComboBox,
+  EuiTextArea,
+  EuiComboBoxProps,
+  EuiHorizontalRule,
+  EuiSpacer,
+} from '../../../../src/components';
+
+const optionsStatic = [
+  {
+    label: 'Titan',
+    'data-test-subj': 'titanOption',
+  },
+  {
+    label: 'Enceladus is disabled',
+    disabled: true,
+  },
+  {
+    label: 'Mimas',
+  },
+  {
+    label: 'Dione',
+  },
+  {
+    label: 'Iapetus',
+  },
+  {
+    label: 'Phoebe',
+  },
+  {
+    label: 'Rhea',
+  },
+  {
+    label:
+      "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+  },
+  {
+    label: 'Tethys',
+  },
+  {
+    label: 'Hyperion',
+  },
+];
+
+export default () => {
+  const [options, setOptions] = useState(optionsStatic);
+  const [selectedOptions, setSelected] = useState([options[2], options[4]]);
+
+  const onChange = (selectedOptions: any) => {
+    setSelected(selectedOptions);
+  };
+
+  return (
+    <>
+      {/* Base components */}
+      <h3>EuiInlineEdit - Text</h3>
+      <EuiInlineEdit
+        editViewType={EuiFieldText}
+        defaultValue="helloWorld"
+        editViewTypeProps={{ id: 'hello' }}
+      />
+      <EuiHorizontalRule />
+
+      <h3>EuiInlineEdit - Textarea</h3>
+      <EuiInlineEdit
+        editViewType={EuiTextArea}
+        defaultValue="Tiramisu jelly beans sweet croissant macaroon topping. Gummies fruitcake sesame snaps lollipop chocolate cake lemon drops icing. Cake cake croissant ice cream jujubes donut toffee. Gummies jelly tiramisu cheesecake brownie icing gummi bears candy canes."
+        editViewTypeProps={{ id: 'hello' }}
+      />
+      <EuiHorizontalRule />
+
+      <h3>EuiInlineEdit - Select</h3>
+      <EuiInlineEdit
+        editViewType={EuiComboBox}
+        editViewTypeProps={{
+          isClearable: true,
+          options: options,
+          placeholder: 'Select or create options',
+          selectedOptions: selectedOptions,
+          onChange: onChange,
+          'data-test-subj': 'demoComboBox',
+          'aria-label': 'Accessible screen reader label',
+          autoFocus: true,
+        }}
+      />
+      <EuiHorizontalRule />
+    </>
+  );
+};
diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js
new file mode 100644
index 00000000000..0042ae171da
--- /dev/null
+++ b/src-docs/src/views/inline_edit/inline_edit_example.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiText, EuiInlineEdit } from '../../../../src';
+
+import InlineEdit from './inline_edit';
+const inlineEditSource = require('!!raw-loader!./inline_edit');
+
+export const InlineEditExample = {
+  title: 'Inline edit',
+  intro: (
+    <>
+      <EuiText>
+        Hello! This is where the EuiInlineEdit documentation intro will go!
+      </EuiText>
+    </>
+  ),
+  sections: [
+    {
+      title: 'Inline edit',
+      text: (
+        <>
+          <p>
+            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
+            component.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inlineEditSource,
+        },
+      ],
+      demo: <InlineEdit />,
+      props: { EuiInlineEdit },
+    },
+  ],
+};
diff --git a/src/components/common.ts b/src/components/common.ts
index 8e857e7e4c6..becbf4f4667 100644
--- a/src/components/common.ts
+++ b/src/components/common.ts
@@ -246,3 +246,18 @@ export type RecursivePartial<T> = {
     : RecursivePartial<T[P]>; // recurse for all non-array and non-primitive values
 };
 type NonAny = number | boolean | string | symbol | null;
+
+// `Defaultize` copied out of @types/react
+type Defaultize<P, D> = P extends any
+  ? string extends keyof P
+    ? P
+    : Pick<P, Exclude<keyof P, keyof D>> &
+        Partial<Pick<P, Extract<keyof P, keyof D>>> &
+        Partial<Pick<D, Exclude<keyof D, keyof P>>>
+  : never;
+
+export type WithDefaultPropsApplied<
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
+> = T extends { defaultProps: infer D }
+  ? Defaultize<ComponentProps<T>, D>
+  : ComponentProps<T>;
diff --git a/src/components/index.ts b/src/components/index.ts
index cf1db2d2757..ff44efb68ed 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -89,6 +89,8 @@ export * from './icon';
 
 export * from './image';
 
+export * from './inline_edit';
+
 export * from './inner_text';
 
 export * from './i18n';
diff --git a/src/components/inline_edit/index.ts b/src/components/inline_edit/index.ts
new file mode 100644
index 00000000000..4d6abf01576
--- /dev/null
+++ b/src/components/inline_edit/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiInlineEdit } from './inline_edit';
diff --git a/src/components/inline_edit/inline_edit.tsx b/src/components/inline_edit/inline_edit.tsx
new file mode 100644
index 00000000000..e782a73103e
--- /dev/null
+++ b/src/components/inline_edit/inline_edit.tsx
@@ -0,0 +1,227 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { HTMLAttributes, useState } from 'react';
+import { CommonProps, WithDefaultPropsApplied } from '../common';
+import classNames from 'classnames';
+
+import { EuiButtonEmpty, EuiButtonIcon } from '../button';
+import { EuiFieldText, EuiTextArea, EuiFormRow } from '../form';
+import { EuiComboBox, EuiComboBoxOptionOption } from '../combo_box';
+import { EuiBadge } from '../badge';
+
+import { htmlIdGenerator } from '../../services/accessibility';
+
+type AcceptableComponents =
+  | typeof EuiTextArea
+  | typeof EuiFieldText
+  | typeof EuiComboBox;
+
+export type EuiInlineEditProps<T extends AcceptableComponents> = HTMLAttributes<
+  HTMLDivElement
+> &
+  CommonProps & {
+    /**
+     * The type of form control that will be displayed when EuiInlineEdit
+     * is in editView
+     * @default text
+     */
+    editViewType?: T;
+    /**
+     * Props for the form control created by editViewType
+     */
+    editViewTypeProps?: WithDefaultPropsApplied<T>;
+    /**
+     * Default string value for input in readView
+     */
+    defaultValue?: string;
+    /**
+     * Allow users to pass in a function when the confirm button is clicked
+     *
+     */
+    onConfirm?: () => void;
+    confirmButtonAriaLabel?: string;
+    cancelButtonAriaLabel?: string;
+    /**
+     * Start in editView
+     */
+    startWithEditOpen?: boolean;
+    /**
+     * Form label that appears above the form control
+     */
+    label?: String;
+  };
+
+export const EuiInlineEdit = <T extends AcceptableComponents>({
+  children,
+  className,
+  //@ts-ignore TypeScript sad :(
+  editViewType = EuiFieldText,
+  editViewTypeProps,
+  defaultValue = 'Click me to edit',
+  onConfirm,
+  confirmButtonAriaLabel,
+  cancelButtonAriaLabel,
+  startWithEditOpen,
+  label,
+  ...rest
+}: EuiInlineEditProps<T>) => {
+  const classes = classNames('euiEuiInlineEdit', className);
+
+  const EditViewType = editViewType;
+  const [isInEdit, setIsInEdit] = useState(startWithEditOpen);
+  const inlineTextEditInputId = htmlIdGenerator('__inlineEditInput')();
+
+  /* Text Controls */
+  const [textEditViewValue, setTextEditViewValue] = useState(
+    defaultValue || ''
+  );
+  const [textReadViewValue, setTextReadViewValue] = useState(defaultValue);
+
+  /* ComboBox Control */
+  const [comboBoxSelectedOptions, setComboBoxSelectedOptions] = useState(
+    editViewTypeProps['selectedOptions'] || []
+  );
+
+  /* onConfirm / Save Functions */
+  const saveTextEditValue = () => {
+    const input = (document.getElementById(
+      inlineTextEditInputId
+    ) as HTMLInputElement).value;
+
+    // If there's no text, cancel the action, reset the input text, and return to readView
+    if (input) {
+      setTextReadViewValue(input);
+      setIsInEdit(!isInEdit);
+      onConfirm && onConfirm();
+    } else {
+      setTextEditViewValue(textReadViewValue);
+      setIsInEdit(!isInEdit);
+    }
+  };
+
+  const saveComboBoxEditValue = () => {
+    // If there are no selections, but the user tries to save, cancel the action and return to readView
+    if (editViewTypeProps['selectedOptions'].length !== 0) {
+      setComboBoxSelectedOptions(editViewTypeProps['selectedOptions']);
+      setIsInEdit(!isInEdit);
+      onConfirm && onConfirm();
+    } else {
+      editViewTypeProps['selectedOptions'] = comboBoxSelectedOptions;
+      setIsInEdit(!isInEdit);
+    }
+  };
+
+  /* Shared Elements & Functions (Text & ComboBox) */
+  const editViewButtons = (
+    <>
+      <EuiButtonIcon
+        iconType="check"
+        aria-label={confirmButtonAriaLabel || 'confirm'}
+        onClick={
+          EditViewType === EuiComboBox
+            ? saveComboBoxEditValue
+            : saveTextEditValue
+        } // this should be a conditional to switch between text and combobox saves
+      />
+      <EuiButtonIcon
+        iconType="cross"
+        aria-label={cancelButtonAriaLabel || 'cancel'}
+        onClick={() => {
+          setIsInEdit(!isInEdit);
+        }}
+      />
+    </>
+  );
+
+  /* Text Elements & Functions (Textarea and FieldText) */
+  const editTextViewOnChange = (e: any) => {
+    setTextEditViewValue(e.target.value);
+  };
+
+  const textEditViewElement = (
+    <>
+      <EditViewType
+        id={inlineTextEditInputId}
+        value={textEditViewValue}
+        onChange={editTextViewOnChange}
+        {...(rest as any)}
+      />
+
+      {editViewButtons}
+    </>
+  );
+
+  const textReadViewElement = (
+    <EuiButtonEmpty
+      color="text"
+      onClick={() => {
+        setIsInEdit(!isInEdit);
+      }}
+    >
+      {textReadViewValue}
+    </EuiButtonEmpty>
+  );
+
+  /* ComboBox Elements & Functions */
+
+  const comboBoxEditViewElement = (
+    <>
+      <EditViewType
+        id={inlineTextEditInputId}
+        selectedOptions={comboBoxSelectedOptions}
+        {...editViewTypeProps}
+        {...(rest as any)}
+      />
+
+      {editViewButtons}
+    </>
+  );
+
+  const comboBoxReadViewElement = (
+    <EuiButtonEmpty
+      color="text"
+      onClick={() => {
+        setIsInEdit(!isInEdit);
+      }}
+    >
+      {comboBoxSelectedOptions.map(
+        (option: EuiComboBoxOptionOption<T>, index: number) => {
+          return (
+            <EuiBadge
+              color="hollow"
+              iconType="cross"
+              iconSide="right"
+              key={index}
+            >
+              {option.label}
+            </EuiBadge>
+          );
+        }
+      )}
+    </EuiButtonEmpty>
+  );
+
+  /* Current Form Control in View */
+  const currentFormControlInView =
+    EditViewType === EuiComboBox ? (
+      <EuiFormRow label={label}>
+        {isInEdit ? comboBoxEditViewElement : comboBoxReadViewElement}
+      </EuiFormRow>
+    ) : (
+      <EuiFormRow label={label}>
+        {isInEdit ? textEditViewElement : textReadViewElement}
+      </EuiFormRow>
+    );
+
+  return (
+    <div className={classes} {...rest}>
+      {currentFormControlInView}
+    </div>
+  );
+};