From e324a043f1f5fa91437b90d6e064bb78d8f29cf2 Mon Sep 17 00:00:00 2001
From: Maxence Mauduit <silent0007@gmail.com>
Date: Thu, 16 Jul 2026 09:03:15 +0900
Subject: [PATCH 1/5] [autocomplete][docs] Add persistent search icon to
 command palette demo

---
 .../css-modules/index.module.css              | 47 ++++++++++++++-----
 .../command-palette/css-modules/index.tsx     | 32 ++++++++++---
 .../demos/command-palette/tailwind/index.tsx  | 35 +++++++++++---
 3 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index a334b19e6e4..3e4a3758073 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -115,11 +115,43 @@
   }
 }
 
-.Input {
+.InputRow {
   box-sizing: border-box;
   position: relative;
   z-index: 1;
-  padding: 0 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline-start: 0.75rem;
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  &:focus-within {
+    outline: 2px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.InputIcon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+}
+
+.Input {
+  box-sizing: border-box;
+  padding: 0 0.75rem 0 0;
   margin: 0;
   border: none;
   width: 100%;
@@ -129,7 +161,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: white;
+  background-color: transparent;
   color: oklch(14.5% 0 0deg);
   outline: none;
 
@@ -139,7 +171,6 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
@@ -150,14 +181,6 @@
       color: oklch(70.8% 0 0deg);
     }
   }
-
-  &:focus {
-    outline: 2px solid oklch(14.5% 0 0deg);
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: white;
-    }
-  }
 }
 
 .ListArea {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
index d878fc7491a..effcf354c6a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
@@ -27,12 +27,15 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <Autocomplete.Input
-                className={styles.Input}
-                aria-label="Search commands"
-                aria-describedby={shortcutsDescriptionId}
-                placeholder="Search for apps and commands…"
-              />
+              <div className={styles.InputRow}>
+                <SearchIcon className={styles.InputIcon} aria-hidden />
+                <Autocomplete.Input
+                  className={styles.Input}
+                  aria-label="Search commands"
+                  aria-describedby={shortcutsDescriptionId}
+                  placeholder="Search for apps and commands…"
+                />
+              </div>
               <Dialog.Close className={styles.VisuallyHidden}>Close command palette</Dialog.Close>
 
               <ScrollArea.Root className={styles.ListArea}>
@@ -94,6 +97,23 @@ export default function ExampleAutocompleteCommandPalette() {
   );
 }
 
+function SearchIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  );
+}
+
 interface Item {
   value: string;
   label: string;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index e4e0ec238a3..5ac680bb472 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,12 +31,18 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <Autocomplete.Input
-                className="relative z-1 h-10 w-full border-0 bg-white px-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
-                aria-label="Search commands"
-                aria-describedby={shortcutsDescriptionId}
-                placeholder="Search for apps and commands…"
-              />
+              <div className="relative z-1 flex items-center gap-2 bg-white ps-3 focus-within:outline-2 focus-within:outline-solid focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
+                <SearchIcon
+                  className="h-4 w-4 shrink-0 text-neutral-500 dark:text-neutral-400"
+                  aria-hidden
+                />
+                <Autocomplete.Input
+                  className="h-10 w-full border-0 bg-transparent pr-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:text-white dark:placeholder:text-neutral-400"
+                  aria-label="Search commands"
+                  aria-describedby={shortcutsDescriptionId}
+                  placeholder="Search for apps and commands…"
+                />
+              </div>
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
               <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden border-t border-neutral-950 dark:border-t-white">
@@ -102,6 +108,23 @@ export default function ExampleAutocompleteCommandPalette() {
   );
 }
 
+function SearchIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  );
+}
+
 interface Item {
   value: string;
   label: string;

From a66002761c63d470a75c2bf05e9e74c1c5bf533f Mon Sep 17 00:00:00 2001
From: Maxence Mauduit <silent0007@gmail.com>
Date: Tue, 21 Jul 2026 09:33:05 +0900
Subject: [PATCH 2/5] Address review: InputGroup part, 16x16 icon, physical
 padding

---
 .../css-modules/index.module.css              |  4 ++--
 .../command-palette/css-modules/index.tsx     | 19 ++++++++++---------
 .../demos/command-palette/tailwind/index.tsx  | 19 ++++++++++---------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 3e4a3758073..de137690e24 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -115,14 +115,14 @@
   }
 }
 
-.InputRow {
+.InputGroup {
   box-sizing: border-box;
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding-inline-start: 0.75rem;
+  padding-left: 0.75rem;
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
index effcf354c6a..e1e61fdb615 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
@@ -27,15 +27,15 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <div className={styles.InputRow}>
-                <SearchIcon className={styles.InputIcon} aria-hidden />
+              <Autocomplete.InputGroup className={styles.InputGroup}>
+                <MagnifyingGlassIcon className={styles.InputIcon} aria-hidden />
                 <Autocomplete.Input
                   className={styles.Input}
                   aria-label="Search commands"
                   aria-describedby={shortcutsDescriptionId}
                   placeholder="Search for apps and commands…"
                 />
-              </div>
+              </Autocomplete.InputGroup>
               <Dialog.Close className={styles.VisuallyHidden}>Close command palette</Dialog.Close>
 
               <ScrollArea.Root className={styles.ListArea}>
@@ -97,19 +97,20 @@ export default function ExampleAutocompleteCommandPalette() {
   );
 }
 
-function SearchIcon(props: React.ComponentProps<'svg'>) {
+function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.3-4.3" />
+      <path d="m11 11 3.5 3.5" />
+      <circle cx="7" cy="7" r="5.5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 5ac680bb472..844c25e8010 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,8 +31,8 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <div className="relative z-1 flex items-center gap-2 bg-white ps-3 focus-within:outline-2 focus-within:outline-solid focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
-                <SearchIcon
+              <Autocomplete.InputGroup className="relative z-1 flex items-center gap-2 bg-white pl-3 focus-within:outline-2 focus-within:outline-solid focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
+                <MagnifyingGlassIcon
                   className="h-4 w-4 shrink-0 text-neutral-500 dark:text-neutral-400"
                   aria-hidden
                 />
@@ -42,7 +42,7 @@ export default function ExampleAutocompleteCommandPalette() {
                   aria-describedby={shortcutsDescriptionId}
                   placeholder="Search for apps and commands…"
                 />
-              </div>
+              </Autocomplete.InputGroup>
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
               <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden border-t border-neutral-950 dark:border-t-white">
@@ -108,19 +108,20 @@ export default function ExampleAutocompleteCommandPalette() {
   );
 }
 
-function SearchIcon(props: React.ComponentProps<'svg'>) {
+function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.3-4.3" />
+      <path d="m11 11 3.5 3.5" />
+      <circle cx="7" cy="7" r="5.5" />
     </svg>
   );
 }

From e1bc9ae483e4a8e90021526508b1b3668c51b981 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 21 Jul 2026 13:29:28 +0200
Subject: [PATCH 3/5] [autocomplete][docs] Show text cursor over command
 palette input group

Matches the cursor: text pattern used by the combobox multiple,
async-multiple, and creatable InputGroup demos: pressing anywhere in
the group focuses the input, so the icon and padding area should show
the I-beam affordance.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../demos/command-palette/css-modules/index.module.css          | 1 +
 .../autocomplete/demos/command-palette/tailwind/index.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index de137690e24..842073cf059 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -124,6 +124,7 @@
   gap: 0.5rem;
   padding-left: 0.75rem;
   background-color: white;
+  cursor: text;
 
   @media (prefers-color-scheme: dark) {
     background-color: oklch(14.5% 0 0deg);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 844c25e8010..c81aa6c4212 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <Autocomplete.InputGroup className="relative z-1 flex items-center gap-2 bg-white pl-3 focus-within:outline-2 focus-within:outline-solid focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
+              <Autocomplete.InputGroup className="relative z-1 flex cursor-text items-center gap-2 bg-white pl-3 focus-within:outline-2 focus-within:outline-solid focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
                 <MagnifyingGlassIcon
                   className="h-4 w-4 shrink-0 text-neutral-500 dark:text-neutral-400"
                   aria-hidden

From f2d4c4d167108e37168a3fc8fbd25697a5c7bf09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 21 Jul 2026 13:41:19 +0200
Subject: [PATCH 4/5] [autocomplete][docs] Set display block on command palette
 icon

Matches the inline svg icon convention used across demos.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../autocomplete/demos/command-palette/css-modules/index.tsx     | 1 +
 .../autocomplete/demos/command-palette/tailwind/index.tsx        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
index e1e61fdb615..57fea84b665 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx
@@ -108,6 +108,7 @@ function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <path d="m11 11 3.5 3.5" />
       <circle cx="7" cy="7" r="5.5" />
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index c81aa6c4212..6d4dacd78c1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -119,6 +119,7 @@ function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <path d="m11 11 3.5 3.5" />
       <circle cx="7" cy="7" r="5.5" />

From 6f41e7d511fb2f9b44cd6c86d42b5a0f6cae953f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 21 Jul 2026 13:47:07 +0200
Subject: [PATCH 5/5] [autocomplete][docs] Inset command palette input group
 focus outline

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../demos/command-palette/css-modules/index.module.css          | 1 +
 .../autocomplete/demos/command-palette/tailwind/index.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 842073cf059..9a75dd7b59a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -132,6 +132,7 @@
 
   &:focus-within {
     outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 6d4dacd78c1..b902a8bdfd8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <Autocomplete.InputGroup className="relative z-1 flex cursor-text items-center gap-2 bg-white pl-3 focus-within:outline-2 focus-within:outline-solid focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
+              <Autocomplete.InputGroup className="relative z-1 flex cursor-text items-center gap-2 bg-white pl-3 focus-within:outline-2 focus-within:outline-solid focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
                 <MagnifyingGlassIcon
                   className="h-4 w-4 shrink-0 text-neutral-500 dark:text-neutral-400"
                   aria-hidden