> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hibonsai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> Event and method reference for the Bonsai Search Bar web component

## Reference table

| Event   | When it fires                                                                                                                | Payload |
| ------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |
| `close` | The close button is clicked. Requires the [`close-button`](/project/docs/bonsai-searchbar/config#display-controls) attribute | none    |

It bubbles and is composed, so you can listen on the element or on any ancestor.

<Callout color="#B45309" icon="triangle-alert">
  **There is no `search` or `results` event on the search bar.** Submitting navigates to `` `${search-path}?q=${query}` `` — the page unloads, so an event fired at that moment would be of no use to you. The results arrive on the destination page, where [`<bonsai-search>` events](/project/docs/bonsai-search/events) give you `search`, `results`, `ai` and `error`.
</Callout>

## The pattern this exists for

`close-button` is how a search bar lives behind a trigger in a site header instead of taking up a row permanently. The button renders inside the component, so the `close` event is the only way your page learns it was pressed — otherwise your trigger and the bar disagree about whether the bar is open.

<CodeGroup>
  ```tsx React theme={null}
  "use client";

  import { useEffect, useRef, useState } from "react";

  export default function HeaderSearch() {
    const [open, setOpen] = useState(false);
    const barRef = useRef<HTMLElement>(null);

    useEffect(() => {
      const el = barRef.current;
      if (!el) return;
      const onClose = () => setOpen(false);
      el.addEventListener("close", onClose);
      return () => el.removeEventListener("close", onClose);
    }, [open]);

    return (
      <>
        <button onClick={() => setOpen((v) => !v)} aria-expanded={open}>
          Search
        </button>

        {open && (
          <bonsai-searchbar
            ref={barRef}
            api-key="API-KEY"
            search-path="/ai-search"
            theme="light"
            close-button=""
          />
        )}
      </>
    );
  }
  ```

  ```html HTML theme={null}
  <button id="search-toggle" aria-expanded="false">Search</button>

  <div id="search-row" hidden>
    <bonsai-searchbar
      id="bar"
      api-key="API-KEY"
      search-path="/ai-search"
      theme="light"
      close-button
    ></bonsai-searchbar>
  </div>

  <script>
    const toggle = document.getElementById("search-toggle");
    const row = document.getElementById("search-row");
    const bar = document.getElementById("bar");

    toggle.addEventListener("click", () => {
      row.hidden = !row.hidden;
      toggle.setAttribute("aria-expanded", String(!row.hidden));
      if (!row.hidden) bar.focus?.();
    });

    bar.addEventListener("close", () => {
      row.hidden = true;
      toggle.setAttribute("aria-expanded", "false");
      toggle.focus();
    });
  </script>
  ```
</CodeGroup>

<Callout color="#0A5B3B" icon="circle-alert">
  In React this is the one part of a search-bar install that needs `"use client"` — the component itself does not. Return focus to your trigger after a close, so keyboard users are not dropped at the top of the document.
</Callout>

## Methods

Call these on the element once the SDK has upgraded it — from an effect, an event handler, or after the script's `load`, never during the first render.

| Method                    | Effect                                                                |
| ------------------------- | --------------------------------------------------------------------- |
| `setQuery(query: string)` | Fills the input without submitting                                    |
| `submit()`                | Navigates to `` `${search-path}?q=…` `` using the current input value |
| `clear()`                 | Empties the input                                                     |

```ts theme={null}
const bar = document.querySelector("bonsai-searchbar");
bar.setQuery("day pass");
bar.submit();
```

`theme` and `close-button` are also live attributes — set them on the element at runtime and the component reacts, so you do not need a method for either.