# salla-search (https://docs.salla.dev/twilight/react/web-components/salla-search)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Store search. It shows a search box inside a modal, with live product results once three or more characters are typed (after a short pause), plus recent searches and popular searches before typing.
Pressing Enter goes to the store's search results page. Use it in a theme header, either as a trigger (`placeholder` or `inline`) or as a bare modal that is opened from your own button.

Without `placeholder` or `inline`, only the modal is rendered. Open it by emitting the `search::open` event, for example `salla.event.emit('search::open')`.
The component also emits these events through `salla.event`: `salla-search::input.focused` (first focus of the input), `salla-search::product.clicked` (payload `{ product, position }`), `salla-search::recommendation.clicked` (payload `{ term, source }`, where source is `history`, `trending`, `suggestion` or `category`) and `Products Searched` (payload `{ query, total }`).

The input has a type of `search`. The back button and the remove button on each history item have an `aria-label`.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-search>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaSearch } from '@salla.sa/twilight-components-react/search';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaSearch } from '@salla.sa/twilight-components-react/search';

export function Example() {
  return (
    <SallaSearch placeholder oval height={48} />
  );
}
```

```html
<salla-search placeholder oval height="48"></salla-search>
```

```tsx
import { SallaSearch } from '@salla.sa/twilight-components-react/search';

export function Example() {
  return (
    <>
      <button onClick={() => salla.event.emit('search::open')}>Search</button>
      <SallaSearch />
    </>
  );
}
```

```html
<button onclick="salla.event.emit('search::open')">Search</button>
<salla-search></salla-search>
```

## Properties [#properties]

| Property      | Attribute     | Description                                                                                                                                                   | Type      | Default |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `height`      | `height`      | Height of the input, in pixels.                                                                                                                               | `number`  | `60`    |
| `inline`      | `inline`      | Shows a read-only input that opens the search modal when it receives focus. Typing still happens in the modal's own input. Ignored when `placeholder` is set. | `boolean` | `false` |
| `maxWords`    | `max-words`   | Maximum number of words allowed in the input. Extra words are cut off as the customer types.                                                                  | `number`  | `5`     |
| `oval`        | `oval`        | Gives the input fully rounded ends (border radius is half of `height`).                                                                                       | `boolean` | `false` |
| `placeholder` | `placeholder` | Shows a button styled like an input that opens the search modal when clicked. Takes priority over `inline`.                                                   | `boolean` | `false` |
| `showAction`  | `show-action` | Shows a search button at the end of the input. Clicking it runs the live search for the current term (it does not go to the results page).                    | `boolean` | `false` |

## Related [#related]

Renders: [`<salla-search-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-search-product-card), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal).