# SearchInput

`SearchInput` is a search field built on top of [`Input`](/chat/docs/sdk/react-native/ui-components/base-ui/input/). It renders a leading search icon and a contextual clear (✕) button that appears only while there is text, using a rounded outline variant and a localized `"Search"` placeholder.

It wraps the supplied `onChangeText` so it can track whether the field has text (to toggle the clear button) and reset the value when the clear button is pressed.

## Usage

```tsx
import { SearchInput } from "stream-chat-react-native";

const [query, setQuery] = useState("");

<SearchInput value={query} onChangeText={setQuery} />;
```

## Props

`SearchInputProps` is `Partial<InputProps>`, so it accepts every [`Input`](/chat/docs/sdk/react-native/ui-components/base-ui/input/) prop (and, through it, every React Native `TextInputProps`) as an optional override.

`SearchInput` applies the following defaults internally; pass the corresponding prop to override any of them:

| Default                  | Description                                                                  |
| ------------------------ | ---------------------------------------------------------------------------- |
| `variant='outline'`      | Renders the bordered outline variant of `Input` with a fully rounded radius. |
| `helperText={false}`     | Hides the helper text area below the field.                                  |
| `autoCapitalize='words'` | Capitalizes the first letter of each word.                                   |
| `autoCorrect={false}`    | Disables autocorrect.                                                        |
| `placeholder`            | Localized `"Search"` string from the translation context.                    |


---

This page was last updated at 2026-06-30T12:00:28.371Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/search-input/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/search-input/).