diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/img/input-group-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/img/input-group-usage.svg
new file mode 100644
index 0000000000..175fb34ed5
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/img/input-group-usage.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md
index 4ff3a4dfc6..f03cbbe83a 100644
--- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/input-group/input-group.md
@@ -3,11 +3,15 @@ id: Input group
section: components
---
+import '../components.css';
+
## Usage
Input groups can combine multiple elements. For example you could add buttons to 1 or both sides of a text input, like in a search field or an email input field.
-
+
+
+
### When to use
Use an input group when the elements are directly connected to each other. Examples include an action button to act on the text, a mandatory and fixed piece of text, a class of text when in a filter, a unit of currency, and more.
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-attributes.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-attributes.svg
new file mode 100644
index 0000000000..f371ece772
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-attributes.svg
@@ -0,0 +1,41 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-auto-complete.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-auto-complete.svg
new file mode 100644
index 0000000000..93692ed4c3
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-auto-complete.svg
@@ -0,0 +1,37 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-elements.svg
new file mode 100644
index 0000000000..5aeba1b504
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/img/text-input-group-elements.svg
@@ -0,0 +1,30 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md
index 62c3ab3c9a..833bc0a0a1 100644
--- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input-group/text-input-group.md
@@ -3,9 +3,13 @@ id: Text input group
section: components
---
+import '../components.css';
+
## Elements
-
+
+
+
1. **Icon (optional):** An icon can be used in front of the input field to identify the purpose of the text input.
@@ -23,7 +27,9 @@ The text input group component is useful for building more complex custom inputs
The text input group can be used to create an attribute-value filter as shown below where the user selects attributes (or keys), then values, and the results are displayed in labels as a key-value pair.
-
+
+
+
See the [attribute-value filtering demo](/components/text-input-group/react-demos#attribute-value-filtering) for an interactive demo of this.
@@ -31,6 +37,8 @@ See the [attribute-value filtering demo](/components/text-input-group/react-demo
The text input group can also be used to create an auto-complete search component where suggestions are presented as a dropdown list as the user types. When only a single suggestion is available, the user can complete the entry without further typing by pressing the Tab key.
-
+
+
+
See the [auto-complete search with typeahead demo](/components/text-input-group/react-demos#auto-complete-search-with-typeahead) for an interactive demo of this.