# SearchBar

The search bar lets merchants enter search queries for objects throughout the app.

```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

value: `boolean`

Whether the text can be changed.

### initialValue

value: `string`

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

value: `() => void`

A callback when the input is focused.

### onSearch

value: `(value: string) => void`

A callback when the search button is tapped.

### onTextChange

value: `(value: string) => void`

A callback containing the new text value of the search bar.

### placeholder

value: `string`

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)