Events

Reference table

Event	When it fires	Payload
`close`	The close button is clicked. Requires the `close-button` attribute	none

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

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 give you search, results, ai and error.

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.

"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=""
        />
      )}
    </>
  );
}

<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>

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.

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

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.

Get Started

Web Components

Support

Reference table

The pattern this exists for

Methods

​Reference table

​The pattern this exists for

​Methods

Reference table

The pattern this exists for

Methods