diff --git a/docs/forms.html b/docs/forms.html
index b38080a..90a2967 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -106,13 +106,36 @@ <h2>Material inputs</h2>
               class="form-control is-invalid"
               id="lightFloatingInputInvalid"
               placeholder="name@example.com"
-              value="test@example.com"
+              value="$invalid"
               required
               autocomplete="off"
             />
             <label for="lightFloatingInputInvalid">Invalid input</label>
-            <div class="invalid-tooltip">
+            <div class="invalid-tooltip mb-1">
               <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
+              This input is not valid
+            </div>
+            <ul class="fst-italic small">
+              <li class="text-danger">Only letters and digits</li>
+              <li class="text-danger">Start with a letter</li>
+              <li class="text-muted">Do not enter your email address</li>
+            </ul>
+          </form>
+          <form class="input-group form-floating has-validation mb-3">
+            <input
+              type="text"
+              class="form-control is-invalid"
+              id="lightFloatingInputGroup"
+              placeholder="username"
+              required
+              autocomplete="off"
+            />
+            <label for="lightFloatingInputGroup">Input group</label>
+            <span class="input-group-text">@example.com</span>
+            <div class="invalid-tooltip mb-1">
+              <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
               This input is not valid
             </div>
           </form>
@@ -209,13 +232,36 @@ <h2>Material inputs</h2>
               class="form-control is-invalid"
               id="invertedFloatingInputInvalid"
               placeholder="name@example.com"
-              value="test@example.com"
+              value="$invalid"
               required
               autocomplete="off"
             />
             <label for="invertedFloatingInputInvalid">Invalid input</label>
-            <div class="invalid-tooltip">
+            <div class="invalid-tooltip mb-1">
               <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-white"></span>
+              This input is not valid
+            </div>
+            <ul class="fst-italic small">
+              <li class="text-danger">Only letters and digits</li>
+              <li class="text-danger">Start with a letter</li>
+              <li class="text-muted">Do not enter your email address</li>
+            </ul>
+          </form>
+          <form class="input-group form-floating has-validation mb-3">
+            <input
+              type="text"
+              class="form-control is-invalid"
+              id="invertedFloatingInputGroup"
+              placeholder="username"
+              required
+              autocomplete="off"
+            />
+            <label for="invertedFloatingInputGroup">Input group</label>
+            <span class="input-group-text">@example.com</span>
+            <div class="invalid-tooltip mb-1">
+              <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
               This input is not valid
             </div>
           </form>
@@ -310,13 +356,36 @@ <h2>Material inputs</h2>
               class="form-control is-invalid"
               id="darkFloatingInputInvalid"
               placeholder="name@example.com"
-              value="test@example.com"
+              value="$invalid"
               required
               autocomplete="off"
             />
             <label for="darkFloatingInputInvalid">Invalid input</label>
-            <div class="invalid-tooltip">
+            <div class="invalid-tooltip mb-1">
+              <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-white"></span>
+              This input is not valid
+            </div>
+            <ul class="fst-italic small">
+              <li class="text-danger">Only letters and digits</li>
+              <li class="text-danger">Start with a letter</li>
+              <li class="text-muted">Do not enter your email address</li>
+            </ul>
+          </form>
+          <form class="input-group form-floating has-validation mb-3">
+            <input
+              type="text"
+              class="form-control is-invalid"
+              id="darkFloatingInputGroup"
+              placeholder="username"
+              required
+              autocomplete="off"
+            />
+            <label for="darkFloatingInputGroup">Input group</label>
+            <span class="input-group-text">@example.com</span>
+            <div class="invalid-tooltip mb-1">
               <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
               This input is not valid
             </div>
           </form>
diff --git a/docs/icons/alert.svg b/docs/icons/alert.svg
new file mode 100644
index 0000000..14d6b13
--- /dev/null
+++ b/docs/icons/alert.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55229 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55229 4 8 4Z" fill="white"/>
+</svg>
diff --git a/docs/icons/icons.css b/docs/icons/icons.css
index 5d2b6c3..4c0e1f3 100644
--- a/docs/icons/icons.css
+++ b/docs/icons/icons.css
@@ -1,3 +1,7 @@
+.icon-alert {
+  -webkit-mask-image: url(alert.svg);
+  mask-image: url(alert.svg);
+}
 .icon-back {
   -webkit-mask-image: url(back.svg);
   mask-image: url(back.svg);
diff --git a/docs/themes/dark.css b/docs/themes/dark.css
index 46f6b7a..1f71d62 100644
--- a/docs/themes/dark.css
+++ b/docs/themes/dark.css
@@ -13,6 +13,7 @@
   --errorColor: #ff9b9b;
   --errorColorDark: #f96b6b;
   --errorColorDarkest: #ffecec;
+  --errorColorLight: #ea3f3f;
   --errorColorLightest: #340b0b;
   --warningColor: #ffc35c;
   --warningColorDarkest: #fff3dd;
@@ -21,6 +22,7 @@
   --successColorDarkest: #e3ffe7;
   --successColorLightest: #08250b;
   --infoColor: #1d212a;
+  --disabledTextColor: rgba(255, 255, 255, .4);
   --defaultBackgroundColor: #1d212a;
   --paperBackgroundColor: #2c3039;
   --dividerColor: rgba(255, 255, 255, .12);
diff --git a/postcss-cozy-vars/index.js b/postcss-cozy-vars/index.js
index bf9eefe..429c73b 100644
--- a/postcss-cozy-vars/index.js
+++ b/postcss-cozy-vars/index.js
@@ -115,10 +115,12 @@ function changeColor(decl) {
     case ".btn-outline-warning:hover":
       decl.value = "var(--warningColor)";
       break;
-    case ".text-danger":
     case ".invalid-feedback":
       decl.value = "var(--errorColor)";
       break;
+    case ".text-danger":
+      decl.value = "var(--errorColorLight)";
+      break;
     case ".btn-outline-danger":
     case ".btn-outline-danger:hover":
       decl.value = "var(--btn-intent-outlined-text-color)";
@@ -175,6 +177,7 @@ function changeBackground(decl) {
     case ".form-select":
     case ".form-select:focus":
     case ".form-check-input":
+    case ".input-group-text":
     case ".card":
       decl.value = "var(--paperBackgroundColor)";
       break;
diff --git a/screenshots/reference/docs_Forms_0_document_0_reference.png b/screenshots/reference/docs_Forms_0_document_0_reference.png
index a8e7613..f821cff 100644
Binary files a/screenshots/reference/docs_Forms_0_document_0_reference.png and b/screenshots/reference/docs_Forms_0_document_0_reference.png differ
diff --git a/src/cozy/_colors.scss b/src/cozy/_colors.scss
index 5478db5..c860956 100644
--- a/src/cozy/_colors.scss
+++ b/src/cozy/_colors.scss
@@ -34,6 +34,7 @@ html {
   --errorColor: #ea3f3f;                       // Error 600
   --errorColorDark: #d31f1f;                   // Error 700
   --errorColorDarkest: #340b0b;                // Error 900
+  --errorColorLight: #ff9b9b;                  // Error 400
   --errorColorLightest: #ffecec;               // Error 100
   --warningColor: #cb8100;                     // Warning 600
   --warningColorDarkest: #281c07;              // Warning 900
@@ -83,6 +84,7 @@ html {
   --secondaryTextColor: rgba(255, 255, 255, .64);
   --errorColor: #fff;
   --errorColorDarkest: #fff;
+  --errorColorLight: #ffd3d3;          // Error 200
   --errorColorLightest: #f96b6b;       // Error 500
   --warningColor: #fff;
   --warningColorDarkest: #fff;
diff --git a/src/cozy/_forms.scss b/src/cozy/_forms.scss
index 2e3c81e..806de6d 100644
--- a/src/cozy/_forms.scss
+++ b/src/cozy/_forms.scss
@@ -70,6 +70,7 @@
     position: absolute;
     top: 1rem;
     left: .75rem;
+    z-index: 3; // needed for input-group
     padding: 0 .25rem;
     pointer-events: none;
     background-color: var(--paperBackgroundColor);
diff --git a/src/cozy/_validation.scss b/src/cozy/_validation.scss
index 9dd8714..2a20fd8 100644
--- a/src/cozy/_validation.scss
+++ b/src/cozy/_validation.scss
@@ -13,7 +13,8 @@
 }
 
 .is-invalid ~ .invalid-tooltip {
-  display: block;
+  display: inline-flex;
+  align-items: center;
 }
 
 .invalid-tooltip .tooltip-arrow {
@@ -34,3 +35,12 @@
     border-bottom-color: var(--errorColorLightest);
   }
 }
+
+.invalid-tooltip .icon {
+  margin: .25rem .375rem .25rem 0;
+}
+
+.input-group .invalid-tooltip {
+  flex-basis: 100%;
+  max-width: 100%;
+}
diff --git a/src/cozy/_variables.scss b/src/cozy/_variables.scss
index 3168c52..b8f67b5 100644
--- a/src/cozy/_variables.scss
+++ b/src/cozy/_variables.scss
@@ -54,6 +54,8 @@ $form-floating-input-padding-t: 1rem;
 $form-floating-input-padding-b: 1rem;
 $form-floating-label-transform: scale(.8) translateY(-2rem) translateX(.15rem);
 
+$form-feedback-tooltip-font-size: .75rem;
+
 // Buttons
 $btn-padding-x: 1rem;
 $btn-padding-y: .688rem;