SearchBar

The search bar lets users enter a query to find content. Follows the Material Design 3 Search specification.

MD3 Search has two parts: the search bar and the search view, the panel that opens from the bar and shows suggestions. This component is the search bar. SearchView is the view.

Usage

Open on Snack ↗

import { SearchBar } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [query, setQuery] = useState('')
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <SearchBar
            placeholder="Search mail"
            value={query}
            onChangeText={setQuery}
            onSearch={(text) => console.log('search', text)}
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

The bar shows a clear button while it holds text. The clear button empties the bar through onChangeText(''), calls onClear, and moves focus back to the input. Set showClearButton={false} to remove it.

The keyboard shows a Search key. When the user presses it, onSearch receives the current query.

The leading icon is a search icon by default, and it is decoration. Set onLeadingIconPress to make it a button, for example a menu or a back arrow. Give the button a name with leadingIconAccessibilityLabel.

Open on Snack ↗

import { SearchBar } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <SearchBar
            placeholder="Search"
            leadingIcon="menu"
            onLeadingIconPress={() => console.log('open drawer')}
            leadingIconAccessibilityLabel="Open menu"
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Opening a search view

Set onPress to make the bar a button that opens a SearchView. The bar is then one tab stop with the button role. A press, Enter, or Space calls onPress. The input is read-only and out of the tab order, but it still shows value and the placeholder, so the bar shows the query after the view closes. The clear button and the trailing actions stay buttons of their own.

<SearchBar placeholder="Search" value={query} onPress={() => setOpen(true)} />

Use onPress rather than onFocus for this. The view returns focus to the bar when it closes, and a bar that opens on focus would reopen it.

Trailing slot

The trailing slot takes one of two props:

Prop	Use it for
`actions`	Icon buttons, such as a voice action. Each entry needs an `accessibilityLabel`.
`trailing`	Custom content that `actions` cannot build, such as an `Avatar`. MD3 sizes the avatar at 30dp.

The two props fill the same slot, so the type rejects both together.

Open on Snack ↗

import { Avatar, SearchBar } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16, gap: 16 }}>
          <SearchBar
            placeholder="Search"
            actions={[
              {
                icon: 'microphone',
                accessibilityLabel: 'Voice search',
                onPress: () => console.log('listen'),
              },
            ]}
          />
          <SearchBar
            placeholder="Search"
            trailing={<Avatar size="extraSmall" label="JD" />}
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Density

The MD3 bar is 56dp high. In a desktop toolbar next to 32dp or 40dp controls, pass a negative density. Each step on the Material density scale removes 4dp, so -4 gives a 40dp bar. The icon buttons keep their 40dp frame and the text keeps bodyLarge, so -4 is the floor.

Open on Snack ↗

import { SearchBar } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16, gap: 16 }}>
          <SearchBar placeholder="Default, 56dp" />
          <SearchBar placeholder="Dense, 40dp" density={-4} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

style={{ height }} does not do this. The style prop goes to the root view, and the pill inside keeps its own height.

Disabled

Open on Snack ↗

import { SearchBar } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <SearchBar placeholder="Search" disabled />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

A disabled bar keeps its container color. Its text, placeholder, and icons change to 38% onSurface.

Specification

Part	MD3 token	Value
Container	height, shape	56dp, full corner. `density` removes 4dp per step, to 40dp at `-4`
Container	color	`surfaceContainerHigh`
Container	elevation	level 0
Container	maximum width	720dp — change it with `style={{ maxWidth }}`
Leading icon	color	`onSurface`
Trailing icons	color	`onSurfaceVariant`
Input text	type, color	`bodyLarge`, `onSurface`
Placeholder	type, color	`bodyLarge`, `onSurfaceVariant`
Focus indicator	color	`secondary`

The bar shows a hover layer. It shows a focus layer and a focus ring for keyboard focus only. A press moves focus into the input and shows no press layer, as MD3 specifies.

MD3 also sets a minimum width of 360dp. The component does not apply it, because the bar would then overflow a phone screen that is narrower than 360dp plus its margins.

Accessibility

The bar is a search landmark on web, and the input has the searchbox role.
The placeholder becomes the accessible name of the input. Set accessibilityLabel to use a different name.
A decorative leading icon stays out of the accessibility tree. When onLeadingIconPress makes it a button, name it with leadingIconAccessibilityLabel. In development, the component warns when that label is missing.
The press wrapper is not a tab stop, so the bar costs a keyboard user one stop, plus one for the clear button while the bar holds text.
With onPress, the bar is the one stop, a button named by the placeholder or accessibilityLabel, and the input leaves the accessibility tree.

Props

Prop	Type	Default	Required	Description
`leadingIcon`	`IconSource`	`magnify`	No	Icon rendered at the start of the bar. Accepts a string name (resolved via the theme's `iconResolver`, for example `mdiResolver`), a pre-rendered element, or a render function that receives `{ size, color }`.
`onLeadingIconPress`	`() => void`	-	No	Makes the leading icon a button — for a navigation icon such as a menu or a back arrow. Label it with `leadingIconAccessibilityLabel`.
`leadingIconAccessibilityLabel`	`string`	-	No	Accessibility label for the leading icon when it is a button.
`onSearch`	`(query: string) => void`	-	No	Called with the current query when the user submits from the keyboard.
`onPress`	`() => void`	-	No	Makes the bar a button, for a bar that opens a `SearchView`. The bar is then one tab stop with the `button` role, a press or Enter calls this, and the input is read-only and out of the tab order. It still shows `value` and the placeholder. The clear button and the trailing actions stay buttons of their own.
`density`	`enum`	`0`	No	Density of the bar, on the Material density scale. `0` is the MD3 bar at 56dp. Each step below removes 4dp: `-1` is 52dp, `-2` is 48dp, `-3` is 44dp, and `-4` is 40dp, the frame of the icon buttons, so it is the floor. Use a negative density in a desktop toolbar with small controls. Text and icon sizes do not change.
`showClearButton`	`boolean`		No	Shows a clear button while the bar holds text.
`clearButtonAccessibilityLabel`	`string`	`Clear search`	No	Accessibility label for the clear button.
`onClear`	`() => void`	-	No	Called after the clear button empties the bar.
`disabled`	`boolean`		No	Disables the input and every button in the bar.
`containerColor`	`string`	-	No	Override the container (background) color. Hover and focus state-layer colors are derived from it. Disabled state keeps the standard appearance.
`contentColor`	`string`	-	No	Override the content (input text and icon) color. Disabled state keeps the standard appearance.
`inputStyle`	`StyleProp<TextStyle>`	-	No	Additional style applied to the text input element.
`style`	`StyleProp<ViewStyle>`	-	No	Style applied to the root container. The MD3 maximum width is 720 dp — set `maxWidth` here to change it.
`ref`	`Ref<TextInput>`	-	No	Ref to the inner `TextInput`, for imperative `focus()`, `blur()` and `clear()` calls.
`hrefAttrs`	`{ target?: string; rel?: string; download?: string \| boolean; }`	-	No	Web only. The `target`, `rel` and `download` of the `<a>` that a view with an `href` renders, for example under Expo Router's `<Link asChild>`. `target: '_blank'` opens the link in a new tab. Native ignores it.
`onKeyDown`	`(event: { nativeEvent: { key?: string; }; }) => void`	-	No	-
`aria-invalid`	`boolean`	-	No	-
`aria-describedby`	`string`	-	No	-
`actions`	`SearchBarAction[]`	-	No	Icon buttons rendered in the trailing slot, such as a voice action.
`trailing`	`ReactNode`	-	No	Custom trailing content, such as an `Avatar`. Use it instead of `actions` when the slot needs something `actions` cannot build.

Usage​

Leading navigation icon​

Opening a search view​

Trailing slot​

Density​

Disabled​

Specification​

Accessibility​

Props​

Usage

Leading navigation icon

Opening a search view

Trailing slot

Density

Disabled

Specification

Accessibility

Props