---
id: searchbar
title: SearchBar
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/SearchBar.mdx";
import Play from "@site/playground/SearchBar/searchbar.playground";

<IconsStyle />

## Usage

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { SearchBar } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`SearchBar`}</CodeBlock>
  </div>
</div>

<Usage />

## Props

:::note
Includes all [Input](input#props) props.
:::

<div class='table-responsive'>

| Name                      | Type                            | Default   | Description                            |
| ------------------------- | ------------------------------- | --------- | -------------------------------------- |
| `cancelButtonProps`       | Text Style                      |           |                                        |
| `cancelButtonTitle`       | string                          |           |                                        |
| `cancelIcon`              | IconNode                        |           |                                        |
| `clearIcon`               | IconNode                        |           | Clear Icon                             |
| `containerStyle`          | View Style                      |           | Style for container                    |
| `inputContainerStyle`     | View Style                      |           | Style for input container              |
| `inputStyle`              | Text Style                      |           | Input Style                            |
| `leftIconContainerStyle`  | View Style                      |           | Left Icon Container Style              |
| `lightTheme`              | boolean                         |           |                                        |
| `loadingProps`            | ActivityIndicatorProps          |           | ActivityIndicatorProps                 |
| `onCancel`                | `(() => any)` \| `(() => any)`  |           | Callback Function on cancel icon press |
| `onClear`                 | Function                        |           |                                        |
| `onKeyboardHide`          | Function                        |           | Callback Function on keyboard hides    |
| `platform`                | `default` \| `android` \| `ios` | `default` |                                        |
| `rightIconContainerStyle` | View Style                      |           | Right Icon Container Style             |
| `round`                   | boolean                         |           |                                        |
| `searchIcon`              | IconNode                        |           | Icon for search                        |
| `showCancel`              | boolean                         |           | Show cancel                            |
| `showLoading`             | boolean                         |           | Show loading                           |

</div>

## Playground

<Play />
