Search Input

Overview

This element is built on top of 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	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
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
searchTextColor	Sets the foreground color of search text.
placeholderTextFont	Sets all the different properties of font for the hint text. Reference link
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

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)"  />