From 4be72c07f3c23b510a7f127c61a07eee63577209 Mon Sep 17 00:00:00 2001
From: Dustin Nielsen <nielsen.dustin@gmail.com>
Date: Thu, 13 Aug 2026 17:06:11 -0600
Subject: [PATCH] chore(#2899): Updated Input example documentation

---
 docs/src/data/configurations/input.ts | 72 ++++++++++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/docs/src/data/configurations/input.ts b/docs/src/data/configurations/input.ts
index 6da35aa46b..f42a6fa9be 100644
--- a/docs/src/data/configurations/input.ts
+++ b/docs/src/data/configurations/input.ts
@@ -365,7 +365,7 @@ const [sin, setSin] = useState<string>("");`,
     {
       id: "leading-trailing-content",
       name: "With leading or trailing content",
-      description: "Inputs with text content before or after the input field",
+      description: "Inputs with text or slotted content before or after the input field",
       code: {
         react: {
           ts: `const [price, setPrice] = useState<string>("");
@@ -389,6 +389,26 @@ const [weight, setWeight] = useState<string>("");`,
     value={weight}
     onChange={(detail) => setWeight(detail.value)}
   />
+</GoabFormItem>
+<GoabFormItem label="Price with rich leading content" mb="l">
+  <GoabInput
+    name="priceWithSlot"
+    type="number"
+    width="10ch"
+    leadingContent={<strong>CAD</strong>}
+    value={price}
+    onChange={(detail) => setPrice(detail.value)}
+  />
+</GoabFormItem>
+<GoabFormItem label="Weight with rich trailing content" mb="l">
+  <GoabInput
+    name="weightWithSlot"
+    type="number"
+    width="10ch"
+    trailingContent={<abbr title="pounds">lb</abbr>}
+    value={weight}
+    onChange={(detail) => setWeight(detail.value)}
+  />
 </GoabFormItem>`,
         },
         angular: [
@@ -422,6 +442,26 @@ const [weight, setWeight] = useState<string>("");`,
       formControlName="weight"
     ></goab-input>
   </goab-form-item>
+  <ng-template #leadingContent><strong>CAD</strong></ng-template>
+  <goab-form-item label="Price with rich leading content" mb="l">
+    <goab-input
+      name="priceWithSlot"
+      type="number"
+      width="10ch"
+      [leadingContent]="leadingContent"
+      formControlName="price"
+    ></goab-input>
+  </goab-form-item>
+  <ng-template #trailingContent><abbr title="pounds">lb</abbr></ng-template>
+  <goab-form-item label="Weight with rich trailing content" mb="l">
+    <goab-input
+      name="weightWithSlot"
+      type="number"
+      width="10ch"
+      [trailingContent]="trailingContent"
+      formControlName="weight"
+    ></goab-input>
+  </goab-form-item>
 </form>`,
           },
           {
@@ -449,6 +489,26 @@ const [weight, setWeight] = useState<string>("");`,
       [(ngModel)]="weight"
     ></goab-input>
   </goab-form-item>
+  <ng-template #leadingContent><strong>CAD</strong></ng-template>
+  <goab-form-item label="Price with rich leading content" mb="l">
+    <goab-input
+      name="priceWithSlot"
+      type="number"
+      width="10ch"
+      [leadingContent]="leadingContent"
+      [(ngModel)]="price"
+    ></goab-input>
+  </goab-form-item>
+  <ng-template #trailingContent><abbr title="pounds">lb</abbr></ng-template>
+  <goab-form-item label="Weight with rich trailing content" mb="l">
+    <goab-input
+      name="weightWithSlot"
+      type="number"
+      width="10ch"
+      [trailingContent]="trailingContent"
+      [(ngModel)]="weight"
+    ></goab-input>
+  </goab-form-item>
 </form>`,
           },
         ],
@@ -461,6 +521,16 @@ const [weight, setWeight] = useState<string>("");`,
   <goa-input version="2" name="weight" type="number" width="10ch">
     <div slot="trailingContent">kg</div>
   </goa-input>
+</goa-form-item>
+<goa-form-item version="2" label="Price with rich leading content" mb="l">
+  <goa-input version="2" name="priceWithSlot" type="number" width="10ch">
+    <div slot="leadingContent"><strong>CAD</strong></div>
+  </goa-input>
+</goa-form-item>
+<goa-form-item version="2" label="Weight with rich trailing content" mb="l">
+  <goa-input version="2" name="weightWithSlot" type="number" width="10ch">
+    <div slot="trailingContent"><abbr title="pounds">lb</abbr></div>
+  </goa-input>
 </goa-form-item>`,
       },
     },