# AutoCompleteSuggestionHeader

Renders the header for the autocomplete list.

## Best Practices

- Keep headers short and informative to avoid obscuring suggestions.
- Use `triggerType` to display context-specific labels or icons.
- Avoid expensive rendering in the header to keep input responsive.
- Keep styles consistent with suggestion items for visual cohesion.
- Use the customization hook instead of editing internal components.

## General Usage

Customize `AutoCompleteSuggestionHeader` and pass it via [`AutoCompleteSuggestionHeader`](/chat/docs/sdk/react-native/v8/core-components/channel#autocompletesuggestionheader/) on `Channel`.

See [`Customizing autocomplete suggestions`](/chat/docs/sdk/react-native/v8/guides/customize-autocomplete-suggestion-list/) for details.

```tsx
import {
  Channel,
  AutoCompleteSuggestionHeader,
} from "stream-chat-react-native";

const AutoCompleteSuggestionHeaderComponent = () => (
  <AutoCompleteSuggestionHeader />
);

<Channel
  AutoCompleteSuggestionHeader={AutoCompleteSuggestionHeaderComponent}
/>;
```

## Props

### `queryText`

The text typed in the message input to generate suggestions.

| Type   |
| ------ |
| string |

### `triggerType`

The trigger that determines which autocomplete list to show.

| Type                              |
| --------------------------------- |
| 'command' \| 'emoji' \| 'mention' |


---

This page was last updated at 2026-04-17T17:33:44.729Z.

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