callstack · MrMuzyk · Jul 1, 2026
diff --git a/docs/5.x/docs/components/Searchbar.mdx → ...x/docs/components/Searchbar/Searchbar.mdx b/docs/5.x/docs/components/Searchbar.mdx → ...x/docs/components/Searchbar/Searchbar.mdx
diff --git a/docs/5.x/docs/components/Searchbar/_meta.json b/docs/5.x/docs/components/Searchbar/_meta.json
@@ -0,0 +1,3 @@
+[
+  "Searchbar"
+]
diff --git a/docs/5.x/docs/components/_meta.json b/docs/5.x/docs/components/_meta.json
@@ -118,7 +118,13 @@
     "collapsible": true,
     "collapsed": false
   },
-  "Searchbar",
+  {
+    "type": "dir",
+    "name": "Searchbar",
+    "label": "Searchbar",
+    "collapsible": true,
+    "collapsed": false
+  },
   {
     "type": "dir",
     "name": "SegmentedButtons",

diff --git a/docs/6.x/docs/components/Searchbar.mdx → ...x/docs/components/Searchbar/Searchbar.mdx b/docs/6.x/docs/components/Searchbar.mdx → ...x/docs/components/Searchbar/Searchbar.mdx
@@ -13,7 +13,7 @@ Searchbar is a simple input box where users can type search queries.
 
 
 
-  <ScreenshotTabs screenshotData={{"bar":"screenshots/searchbar.png","view":"screenshots/searchbar-view.png"}}/>
+  <ScreenshotTabs screenshotData={{"contained":"screenshots/searchbar.png","divided":"screenshots/searchbar-view.png"}}/>
 
 
 ## Usage
@@ -49,191 +49,191 @@ export default MyComponent;
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="placeholder" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="placeholder" />
 
 <div>
 
 ### value (required)
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="value" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="value" />
 
 <div>
 
 ### onChangeText
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="onChangeText" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="onChangeText" />
 
 <div>
 
 ### mode  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="mode" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="mode" />
 
 <div>
 
 ### icon
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="icon" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="icon" />
 
 <div>
 
 ### iconColor
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="iconColor" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="iconColor" />
 
 <div>
 
 ### onIconPress
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="onIconPress" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="onIconPress" />
 
 <div>
 
 ### onClearIconPress
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="onClearIconPress" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="onClearIconPress" />
 
 <div>
 
 ### searchAccessibilityLabel
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="searchAccessibilityLabel" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="searchAccessibilityLabel" />
 
 <div>
 
 ### clearIcon
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="clearIcon" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="clearIcon" />
 
 <div>
 
 ### clearAccessibilityLabel
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="clearAccessibilityLabel" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="clearAccessibilityLabel" />
 
 <div>
 
 ### traileringIcon  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="traileringIcon" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="traileringIcon" />
 
 <div>
 
 ### traileringIconColor  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="traileringIconColor" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="traileringIconColor" />
 
 <div>
 
 ### onTraileringIconPress
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="onTraileringIconPress" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="onTraileringIconPress" />
 
 <div>
 
 ### traileringIconAccessibilityLabel
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="traileringIconAccessibilityLabel" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="traileringIconAccessibilityLabel" />
 
 <div>
 
 ### right  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="right" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="right" />
 
 <div>
 
 ### showDivider  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="showDivider" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="showDivider" />
 
 <div>
 
 ### elevation  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="elevation" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="elevation" />
 
 <div>
 
 ### inputStyle
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="inputStyle" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="inputStyle" />
 
 <div>
 
 ### style
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="style" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="style" />
 
 <div>
 
 ### loading
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="loading" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="loading" />
 
 <div>
 
 ### testID
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="testID" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="testID" />
 
 <div>
 
 ### theme
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="theme" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="theme" />
 
 <div>
 
 ### ref
 
 </div>
 
-  <PropTable componentLink="Searchbar" prop="ref" />
+  <PropTable componentLink="Searchbar/Searchbar" prop="ref" />
 
 
 
@@ -242,7 +242,7 @@ export default MyComponent;
 
   ## Theme colors
 
-  <ThemeColorsTable themeColorsData={{"-":{"backgroundColor":"theme.colors.elevation.level3","placeholderTextColor":"theme.colors.onSurface","textColor":"theme.colors.onSurfaceVariant","selectionColor":"theme.colors.primary","iconColor":"theme.colors.onSurfaceVariant","trailingIconColor":"theme.colors.onSurfaceVariant","dividerColor":"theme.colors.outline"}}} componentName="Searchbar" />
+  <ThemeColorsTable themeColorsData={{"-":{"backgroundColor":"theme.colors.surfaceContainerHigh","placeholderTextColor":"theme.colors.onSurfaceVariant","textColor":"theme.colors.onSurface","selectionColor":"theme.colors.primary","iconColor":"theme.colors.onSurfaceVariant","trailingIconColor":"theme.colors.onSurfaceVariant","dividerColor":"theme.colors.outline"}}} componentName="Searchbar" />
 
 
 <span />
diff --git a/docs/6.x/docs/components/Searchbar/SearchbarResults.mdx b/docs/6.x/docs/components/Searchbar/SearchbarResults.mdx
@@ -0,0 +1,93 @@
+---
+title: SearchbarResults
+---
+
+import PropTable from '@docs/components/PropTable.tsx';
+import ExtendsLink from '@docs/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@docs/components/ExtendedExample.tsx';
+
+A container for the search results / suggestions list shown below a
+`Searchbar` (MD3 search anatomy element 6). It only provides the surface;
+grouping results with gaps is left to the consumer.
+
+
+
+<span />
+
+## Usage
+```js
+import * as React from 'react';
+import { Searchbar, List } from 'react-native-paper';
+
+const MyComponent = () => {
+  const [query, setQuery] = React.useState('');
+
+  return (
+    <>
+      <Searchbar value={query} onChangeText={setQuery} placeholder="Search" />
+      <Searchbar.Results>
+        <List.Item title="Result 1" />
+        <List.Item title="Result 2" />
+      </Searchbar.Results>
+    </>
+  );
+};
+
+export default MyComponent;
+```
+
+
+  ## Props
+  <span />
+
+
+
+<div>
+
+### children (required)
+
+</div>
+
+  <PropTable componentLink="Searchbar/SearchbarResults" prop="children" />
+
+<div>
+
+### elevation
+
+</div>
+
+  <PropTable componentLink="Searchbar/SearchbarResults" prop="elevation" />
+
+<div>
+
+### style
+
+</div>
+
+  <PropTable componentLink="Searchbar/SearchbarResults" prop="style" />
+
+<div>
+
+### theme
+
+</div>
+
+  <PropTable componentLink="Searchbar/SearchbarResults" prop="theme" />
+
+<div>
+
+### testID
+
+</div>
+
+  <PropTable componentLink="Searchbar/SearchbarResults" prop="testID" />
+
+
+
+<span />
+
+<span />
+
+<span />
diff --git a/docs/6.x/docs/components/Searchbar/_meta.json b/docs/6.x/docs/components/Searchbar/_meta.json
@@ -0,0 +1,4 @@
+[
+  "Searchbar",
+  "SearchbarResults"
+]
diff --git a/docs/6.x/docs/components/_meta.json b/docs/6.x/docs/components/_meta.json
@@ -118,7 +118,13 @@
     "collapsible": true,
     "collapsed": false
   },
-  "Searchbar",
+  {
+    "type": "dir",
+    "name": "Searchbar",
+    "label": "Searchbar",
+    "collapsible": true,
+    "collapsed": false
+  },
   {
     "type": "dir",
     "name": "SegmentedButtons",

diff --git a/docs/component-docs.config.ts b/docs/component-docs.config.ts
@@ -115,7 +115,10 @@ const pages = {
     RadioButtonIOS: 'RadioButton/RadioButtonIOS',
     RadioButtonItem: 'RadioButton/RadioButtonItem',
   },
-  Searchbar: 'Searchbar',
+  Searchbar: {
+    Searchbar: 'Searchbar/Searchbar',
+    SearchbarResults: 'Searchbar/SearchbarResults',
+  },
   SegmentedButtons: {
     SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
   },