diff --git a/plugins/woocommerce-admin/client/devdocs/examples.json b/plugins/woocommerce-admin/client/devdocs/examples.json
index 3325c7b614b..c46d733bb76 100644
--- a/plugins/woocommerce-admin/client/devdocs/examples.json
+++ b/plugins/woocommerce-admin/client/devdocs/examples.json
@@ -23,5 +23,6 @@
   { "component": "Summary", "render": "MySummaryList" },
   { "component": "Table" },
   { "component": "Tag" },
+  { "component": "TextControlWithAffixes" },
   { "component": "ViewMoreList" }
 ]
diff --git a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/example.md b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/example.md
new file mode 100644
index 00000000000..5e228cc1035
--- /dev/null
+++ b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/example.md
@@ -0,0 +1,21 @@
+```jsx
+import { TextControlWithAffixes } from '@woocommerce/components';
+
+const MyTextControlWithAffixes = () => (
+    <div>
+        <TextControlWithAffixes
+            prefix="Prefix"
+            placeholder="Placeholder text..."
+        />
+        <TextControlWithAffixes
+            prefix="Prefix"
+            suffix="Suffix"
+            placeholder="Placeholder text..."
+        />
+        <TextControlWithAffixes
+            suffix="Suffix"
+            placeholder="Placeholder text..."
+        />
+    </div>
+);
+```
\ No newline at end of file