# SearchBar

- category: UI
- chinese: UI组件
- type: UI Component

---

## Design

`SearchBar` is a combination of `Input` and `Button`, which is often used as the search box at the top of the screen.

## API

| Parameters       | Description                                            | Type        | Default   |
| ---------------- | ------------------------------------------------------ | ----------- | --------- |
| showSearchButton | whether display search buttons                         | boolean     | true      |
| value            | default value                                          | String      | null      |
| placeholder      | placeholder                                            | String      | null      |
| onChange         | Triggered when user input                              | Function    |
| onSearch         | Triggered when the user clicks the search button       | Function    | false     |
| style            | style                                                  | styleObject | null      |
| placeholderColor | color of the `placeholder`, note the lower case of `h` | string      | '#cccccc' |
| inputStyle       | Search area style                                      | styleObject | {}        |
| centered         | placeholder whether is centered                        | boolean     | false     |

## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />