# SearchBar

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/search-bar
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

The input box component of the search scene.

## Install

```bash
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](/components/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](https://github.com/ant-design/ant-design-mobile/issues/5545) for more details

---

Index of all JGuang resources: https://jiguang132.com/llms.txt