Skip to main content
This element is built on top of Input element and enables users to enter a search string.

​
Properties

NameTypeDescription
namestringName of the element
searchTextstringText entered by the user into the element.
placeholderTextstringHint text, displayed within the element to provide an example or suggestion.
searchIconURLstringAsset URL for the search icon
searchInputStyleSearchInputStyleStyling properties and values of the element

​
SearchInputStyle

Styling properties and values of the element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
boxShadowSets shadow effects around the element
searchIconTintSets the tint or color applied to the search icon
searchTextFontSets all the different properties of font for the search text. Reference link
searchTextColorSets the foreground color of search text.
placeholderTextFontSets all the different properties of font for the hint text. Reference link
placeholderTextColorSets the foreground color of hint text.

​
Events

Events triggered by the element.
NameDescription
cc-search-changedEvent triggered when the content of the element is modified or changed by the user.

​
Usage

  • JavaScript
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)"  />
⌘I