SearchBar

SearchBar usually locates above the app content area and provides search capabilities.

<SearchBar placeholder="please input content" />

Example

Basic usage of SearchBar component.

API

PropertiesDescriptionTypeDefault
valueThe input valuestring-
placeholderThe placeholder textstring-
maxLengthThe maximum number of characters the user can inputnumber-
clearableWhether to enable the clear icon, the input would be cleared after the clear icon is clickedbooleantrue
showCancelWhether to display the cancel button on the right side of the search inputboolean | ((focus: boolean, val: string) => boolean)false
cancelTextThe text of the cancel buttonstring'cancel'
iconThe icon nodeReactNode<Icon type="search" />
clearOnCancelWhether to clear the input after the cancel button is clickedbooleantrue
onSearchTriggered when the enter key is input(val: string) => void-
onChangeTriggered when the input content is changed(value: string) => void-
onFocusTriggered when the input get focus(e: React.FocusEvent<HTMLInputElement>) => void-
onBlurTriggered when the input lose focus(e: React.FocusEvent<HTMLInputElement>) => void-
onClearTriggered when the clear button is clicked() => void-
onCancelTriggered when the cancel button is clicked() => void-
ON THIS PAGE