Skip to main content

​
How configuration works

Starting with SDK v3.2, the <bonsai-searchbar> component has two configuration sources:
  1. HTML attributes you set on the tag — the commonly used ones are listed below, with the rest under Additional attributes.
  2. Runtime configuration from the Settings API — theming (colors, alignment, max width), default placeholder, default suggestions, and feature toggles (theme, autocomplete). These are fetched per-tenant by the component at load time from /rest/search-component-config/ using your api-key, and they are applied automatically.
Where theming lives now. Colors, borders, alignment, width, and opacity are not HTML attributes anymore. They are either returned by the Settings API (preferred — managed per tenant from the Bonsai dashboard) or overridden locally via CSS custom properties on the host element. See Advanced Styling for the full CSS variable list.

​
Precedence

For any given value, the component resolves in this order:
  1. HTML attribute on the tag (if set)
  2. Settings API response for this api-key (if provided)
  3. Built-in default
So you can leave the tag minimal (just api-key) and let the dashboard drive the rest, or override a specific value on the tag when you need to.

​
Attributes

The most commonly used attributes on <bonsai-searchbar>: Legacy colour attributes (brand-color, text-color, input-bg, results-columns, input-opacity, …) were removed in v3.2.0 and are ignored. Use CSS custom properties or the Settings API instead.

​
Additional attributes

Under theme="dark" the search bar’s colour variables are fixed by the theme and cannot be overridden from your page — the same restriction that applies to <bonsai-search>. The search bar’s own recipe is at Dark theme; it is the same mechanism as the one for <bonsai-search>, with the selector and variable set that apply to a search bar.

​
Required Attributes

​
required
Your Bonsai API key. Required for fetching runtime configuration from the Settings API and for autocomplete.

​
API Configuration

​
default:"https://api.hibonsai.com"
The API origin. Optional. The Settings API URL is derived from this value automatically, and the search path comes from your organization’s configured version rather than from this string — see base-url.

​
Redirect and UX

​
default:"/ai-search"
The path the component redirects to after query submission. On submit the component navigates to `${search-path}?q=${query}` on the current origin, where a <bonsai-search> component reads q and runs the search automatically.
​
default:"Describe what you're looking for..."
The placeholder text shown before the user enters a query. If omitted, the value from the Settings API is used.
​
default:"[]"
A JSON array of suggested queries shown in the dropdown. If omitted, the Settings API content.suggestions list is used.
The suggestions attribute must be valid JSON. Use single quotes around the attribute value and double quotes inside the array.

​
Theme

​
default:"light"
The default color palette. Options: light, dark, or auto (follows the user’s system preference).

​
Display controls

​
default:"false"
Boolean attribute — renders a close button inside the component. Clicking it dispatches a close event on the element; nothing is hidden for you. See Events for the header-overlay pattern this exists for.

​
Styling

All visual customization (colors, borders, alignment, max width, hover states) is done via either:
  • The Settings API — preferred. Configure per-tenant in the Bonsai dashboard; the component picks up the values automatically.
  • CSS custom properties on the host element — to override per-embed.
See Advanced Styling for the full list of CSS variables and override examples.