SearchBar
The input box component of the search scene.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
The input box component of the search scene.
When to Use
Narrow down the information pool to get targeted information quickly and easily.
Demos
SearchBar
Props
| Name | Description | Type | Default |
|---|---|---|---|
| cancelText | Text of the cancel button | string | '取消' |
| clearOnCancel | Whether to clear the input after the cancel button is clicked | boolean | true |
| clearable | Whether to enable the clear icon, the input would be cleared after the clear icon is clicked | boolean | true |
| searchIcon | Custom search icon | ReactNode | <SearchOutline /> |
| maxLength | The maximum number of characters the user can enter | number | - |
| onBlur | Triggered when the input lose focus | (e: React.FocusEvent<HTMLInputElement>) => void | - |
| onCancel | Triggered when the cancel button is clicked | () => void | - |
| onChange | Triggered when the input content is changed | (value: string) => void | - |
| onClear | Triggered when the clear button is clicked | () => void | - |
| onFocus | Triggered when the input get focus | (e: React.FocusEvent<HTMLInputElement>) => void | - |
| onSearch | Triggered when the enter key is input | (value: string) => void | - |
| onlyShowClearWhenFocus | If true, the clear button will only be displayed when the input box is focused. If false, the clear button will still be displayed after the input box loses focus. | boolean | false |
| placeholder | Hint text | string | - |
| showCancelButton | Whether to display the cancel button on the right side of the search input | boolean | ((focus: boolean, value: string) => boolean) | false |
| value | Input value | string | - |
In addition, the following native attributes are supported: onCompositionStart onCompositionEnd autoFocus
CSS Variables
| Name | Description | Default |
|---|---|---|
| --background | background color | #f5f5f5 |
| --border-radius | circle corner | 6px |
| --height | input height | 32px |
| --padding-left | The left padding. | 8px |
| --placeholder-color | placeholder font color | var(--adm-color-weak) |
Ref
The same as Input
FAQ
The keyboard button does not say Search but Return
This property enterkeyhinit can only be used in Android version 4.4.5 or later 、IOS version 13.4 or later, see issue for more details