diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
index ac9babcc..a2a4c991 100644
--- a/docs/content/3.forms/1.input.md
+++ b/docs/content/3.forms/1.input.md
@@ -99,7 +99,7 @@ Use the `loadingIcon` prop to set a different icon or change it globally in `ui.
 ---
 baseProps:
   name: 'input'
-  placeholder: 'Search'
+  placeholder: 'Searching...'
 props:
   loading: true
   icon: 'i-heroicons-magnifying-glass-20-solid'
@@ -110,6 +110,30 @@ excludedProps:
 
 ### Group
 
+You can use the `InputGroup` component to add a label and additional informations to a form element.
+
+::component-card{slug="InputGroup"}
+---
+baseProps:
+  name: 'group'
+props:
+  label: 'Email'
+  help: "We'll only use this for spam."
+  hint: 'Required'
+  required: true
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{name="group" placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+::alert{icon="i-heroicons-light-bulb"}
+This also works with `Textarea`, `Select` and `SelectMenu` components.
+::
+
 ## Props
 
 :component-props