docs: clarify form-adorn usage and input type (#42547)

diff --git a/site/src/content/docs/forms/form-adorn.mdx b/site/src/content/docs/forms/form-adorn.mdx
index 8b3bfc0b090466effaf330b9c6663d67ebe11c10..10b9ffd32369f47f64e09f96eda6d5f2ada45c24 100644 (file)
--- a/site/src/content/docs/forms/form-adorn.mdx
+++ b/site/src/content/docs/forms/form-adorn.mdx
@@ -7,19 +7,19 @@ css_layer: forms
 
 ## How it works
 
-The `.form-adorn` wrapper replicates `.form-control` styling (border, background, focus states) while using flexbox to position adornments alongside a "ghost input," a form control that has virtually no visual styling. The `.form-ghost` input inside is transparent and inherits styles from the wrapper.
+Apply both `.form-control` and `.form-adorn` to a wrapper element. `.form-control` provides the border, background, padding, and focus states; `.form-adorn` uses flexbox to position adornments alongside a "ghost input," a form control that has virtually no visual styling. The `.form-ghost` input inside is transparent and inherits styles from the wrapper.
 
 See the [form control]([[docsref:/forms/form-control]]) documentation for more information on the `.form-control` and `.form-ghost` classes.
 
 ## Example
 
-Wrap an icon and a `.form-ghost` input inside `.form-adorn`. Place the adornment before the input in the DOM for start position (left in LTR).
+Wrap an icon and a `.form-ghost` input inside a `<div>` with `.form-control` and `.form-adorn`. Place the adornment before the input in the DOM for start position (left in LTR).
 
 <Example code={`<div class="form-control form-adorn">
     <div class="form-adorn-icon">
       <svg class="bi" width="16" height="16"><use href="#search" /></svg>
     </div>
-    <input type="text" class="form-ghost" placeholder="Search...">
+    <input type="search" class="form-ghost" placeholder="Search...">
   </div>`} />
 
 Use `.form-adorn-end` to position the adornment on the trailing side (keeps DOM order, uses CSS to flip visually):
@@ -41,7 +41,7 @@ Add a label outside the `.form-adorn` wrapper for proper form semantics:
       <div class="form-adorn-icon">
         <svg class="bi" width="16" height="16"><use href="#search" /></svg>
       </div>
-      <input type="text" class="form-ghost" id="searchInput" placeholder="Search...">
+      <input type="search" class="form-ghost" id="searchInput" placeholder="Search...">
     </div>
   </div>
   <div>
@@ -64,7 +64,7 @@ Wrap a `.form-adorn` in a `.form-field` to pair it with a label and description
       <div class="form-adorn-icon">
         <svg class="bi" width="16" height="16"><use href="#search" /></svg>
       </div>
-      <input type="text" class="form-ghost" id="adornField" placeholder="Search...">
+      <input type="search" class="form-ghost" id="adornField" placeholder="Search...">
     </div>
     <small class="form-text">Search across all pages and posts.</small>
   </div>`} />