# SearchBar The search bar lets merchants enter search queries for objects throughout the app. ### SearchBar ```tsx import React from 'react'; import { reactExtension, Text, Screen, SearchBar, ScrollView, } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridModal = () => { const [searched, setSearched] = React.useState(''); return ( <Screen name="SearchBar" title="SearchBar"> <ScrollView> <SearchBar onSearch={setSearched} editable initialValue="initial value" placeholder="placeholder" /> <Text>Searched: {searched}</Text> </ScrollView> </Screen> ); }; export default reactExtension( 'pos.home.modal.render', () => { return <SmartGridModal />; }, ); ``` ```ts import { extension, Screen, ScrollView, SearchBar, Text, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.home.modal.render', (root) => { const mainScreen = root.createComponent( Screen, {name: 'SearchBar', title: 'SearchBar'}, ); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text, null); const onSearch = (value: string) => { text.replaceChildren(`Searched: ${value}`); }; const searchBar = root.createComponent( SearchBar, { onSearch, editable: true, initialValue: 'initial value', placeholder: 'placeholder', }, ); scrollView.append(searchBar); scrollView.append(text); mainScreen.append(scrollView); root.append(mainScreen); }, ); ``` ## SearchBar ### SearchBarProps ### editable Whether the text can be changed. ### initialValue The initial text value in the search bar. This is different from `placeHolder`, which is displayed in the search bar when the search bar doesn't have a populated string. ### onFocus A callback when the input is focused. ### onSearch A callback when the search button is tapped. ### onTextChange A callback containing the new text value of the search bar. ### placeholder The placeholder value to display in the search bar when no text is entered. ## Related - [ProductSearch API](/api/pos-ui-extensions/apis/productsearch-api#example-search-for-products-with-a-search-bar)