SearchBar

lis

Cancel

Places

Lisbon

Portugal

Lismore

Ireland

Recent

Lisbon to Porto train

Installation

npx axiom add search-bar

pnpm dlx axiom add search-bar

yarn dlx axiom add search-bar

bun x axiom add search-bar

Also copies: icon, spinner, text, tappable and useControllableState. Installs react-native-reanimated.

Requires the search and close icons in your icon registry. Colors come from searchBar.{filled,outline}.{default,focused,disabled} in the component tokens.

Usage

import { SearchBar } from "@/components/ui/search-bar";

<SearchBar value={query} onChangeText={setQuery} showCancel />;

Props

SearchBar forwards TextInput props (autoFocus, returnKeyType, onSubmitEditing…) and adds:

Prop	Type	Default	Description
`value`	`string`	—	The query.
`onChangeText`	`(text: string) => void`	—	Called on every keystroke. Debounce your request, not this callback.
`onSubmit`	`(text: string) => void`	—	Called when the user presses the search key on the keyboard.
`placeholder`	`string`	`'Search'`	Hint in the empty field. Say what is searched: “Search messages”.
`showCancel`	`boolean \| 'focus'`	`'focus'`	Cancel button next to the field. `'focus'` slides it in only while the field is focused.
`cancelLabel`	`string`	`'Cancel'`	Label of the cancel button.
`onCancel`	`() => void`	—	Called on Cancel, after the field is cleared and blurred.
`clearable`	`boolean`	`true`	Shows a clear button when the field has text.
`loading`	`boolean`	`false`	Replaces the search icon with a spinner while results load.
`trailing`	`ReactNode`	—	Extra content inside the field on the right, like a microphone or a filter button. Hidden while there is text.
`variant`	`'filled' \| 'outline'`	`'filled'`	`filled` is the iOS gray field, `outline` has a border for light surfaces.
`size`	`'sm' \| 'md'`	`'sm'`	Height: 36 or 44pt.
`disabled`	`boolean`	`false`	Greys the bar and stops every interaction, including Cancel.
`containerStyle`	`StyleProp<ViewStyle>`	—	The row holding the field and the cancel button. `style` goes to the `TextInput`.
`ref`	`Ref<TextInput>`	—	`focus()`, `blur()`, `clear()`.

SearchBar in an AppBar

AppBar.Search places the bar under a large title and folds it away as the list scrolls, like iOS.

Prop	Type	Default	Description
`collapsible`	`boolean`	`true`	Folds the field away as the bar’s `collapseProgress` passes `0.6`. `false` pins it under the bar.
`...SearchBarProps`	—	—	Every SearchBar prop.

Use cases

Search under a large title

The bar belongs to the screen header. Focusing it hides the title and brings Cancel.

Messages

Grace HopperFound the bug.

Alan TuringLunch first.

<AppBar variant="large">
	<AppBar.Title>Messages</AppBar.Title>
	<AppBar.Search
		placeholder="Search"
		value={query}
		onChangeText={setQuery}
		trailing={
			<IconButton
				icon="mic"
				size="sm"
				accessibilityLabel="Dictate"
				onPress={dictate}
			/>
		}
	/>
</AppBar>

Live results while typing

loading while the debounced request runs. Matches are highlighted in the results.

react nat

Cancel

react native

react native reanimated

react native svg

const [query, setQuery] = useState("");
const debounced = useDebouncedValue(query, 250);
const results = useQuery({
	queryKey: ["search", debounced],
	queryFn: () => search(debounced),
	enabled: !!debounced,
});

<SearchBar
	autoFocus
	value={query}
	onChangeText={setQuery}
	loading={results.isFetching}
/>;

Filtering a local list

No Cancel, an outline bar at the top of a sheet that filters the options below.

Country

🇵🇱

Poland

🇵🇹

Portugal

<SearchBar variant="outline" showCancel={false} placeholder="Search countries" value={filter} onChangeText={setFilter} />
<BottomSheet.FlatList data={countries.filter(matches(filter))} renderItem={renderCountry} />

Search experience, for history, debounce and no-results handling
Input
AppBar

SearchBar

On this page