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

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Usage from "../component_usage/SearchBar.mdx";
import Play from "@site/playground/SearchBar/searchbar.playground";

## Import

```tsx
import { SearchBar } from "@rneui/themed";
```

## Usage

<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                        |                      |             |
| `containerStyle`          | View Style                      |                      |             |
| `inputContainerStyle`     | View Style                      |                      |             |
| `inputStyle`              | Text Style                      |                      |             |
| `leftIconContainerStyle`  | View Style                      |                      |             |
| `lightTheme`              | boolean                         |                      |             |
| `loadingProps`            | ActivityIndicatorProps          |                      |             |
| `onCancel`                | `(() => any)` or `(() => any)`  |                      |             |
| `onClear`                 | Function                        |                      |             |
| `platform`                | `default` or `android` or `ios` | `'default' as const` |             |
| `rightIconContainerStyle` | View Style                      |                      |             |
| `round`                   | boolean                         |                      |             |
| `searchIcon`              | IconNode                        |                      |             |
| `showCancel`              | boolean                         |                      |             |
| `showLoading`             | boolean                         |                      |             |

</div>

## Playground

<Play />
