> ![](public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button.|
| placeholderColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Placeholder text color.|
| placeholderFont | [Font](../../ui/ts-types.md#Font) | - | Placeholder text style.|
| textFont | [Font](../../ui/ts-types.md#Font) | - | Text font for the search text box.|
## Events
| Name| Description|
| -------- | -------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> -**value**: current text input.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input.|
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied.|
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut.|
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted.|
## SearchController
Defines the controller of the **\<Search>** component.
#### Objects to Import
```
controller: SearchController = new SearchController()
```
#### caretPosition
creatPosition(value: number): viod
Sets the position of the caret.
- Parameters
| Name | Type | Mandatory | Default Value | Description |