> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Search Input

> Search Input — CometChat documentation.

## Overview

This element is built on top of [Input](/ui-kit/react/v4/input) element and enables users to enter a search string.

## Properties

| Name             | Type                                                               | Description                                                                  |
| ---------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------- |
| name             | string                                                             | Name of the element                                                          |
| searchText       | string                                                             | Text entered by the user into the element.                                   |
| placeholderText  | string                                                             | Hint text, displayed within the element to provide an example or suggestion. |
| searchIconURL    | string                                                             | Asset URL for the search icon                                                |
| searchInputStyle | [SearchInputStyle](/ui-kit/react/v4/search-input#searchinputstyle) | Styling properties and values of the element                                 |

## SearchInputStyle

Styling properties and values of the element

| Name                 | Description                                                                                                                                                                          |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width                | Sets the width of the element                                                                                                                                                        |
| height               | Sets the height of the element                                                                                                                                                       |
| border               | Sets the border of the element                                                                                                                                                       |
| borderRadius         | Sets the border radius of the element                                                                                                                                                |
| background           | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| boxShadow            | Sets shadow effects around the element                                                                                                                                               |
| searchIconTint       | Sets the tint or color applied to the search icon                                                                                                                                    |
| searchTextFont       | Sets all the different properties of font for the search text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                               |
| searchTextColor      | Sets the foreground color of search text.                                                                                                                                            |
| placeholderTextFont  | Sets all the different properties of font for the hint text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                 |
| placeholderTextColor | Sets the foreground color of hint text.                                                                                                                                              |

## Events

Events triggered by the element.

| Name              | Description                                                                         |
| ----------------- | ----------------------------------------------------------------------------------- |
| cc-search-changed | Event triggered when the content of the element is modified or changed by the user. |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    const searchHandler = event => {
      console.log(event.detail.searchText);
    }

    <cometchat-search-input 
    :placeholderText="Search" 
    :text="A" 
    @cc-search-changed="searchHandler($event)"  />
    ```
  </Tab>
</Tabs>