> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.