Attributes
The<bonsai-searchbar> web component accepts the following attributes to customize redirect behavior and appearance.
Reference Table
| Attribute | Required | Default | Notes |
|---|---|---|---|
search-path | No | "/ai-search" | Redirect destination |
placeholder | No | "Describe what you're looking for..." | Input placeholder |
suggestions | No | [] | JSON array string |
theme | No | light | light, dark, or auto |
brand-color | No | #0A5B3B | Primary accent |
text-color | No | #303030 | Primary text |
muted-color | No | #9CA3AF | Secondary text |
input-text-color | No | text-color | Input + icon text |
suggestions-text-color | No | input-text-color | Suggestion text |
suggestions-hover-bg | No | rgba(0, 0, 0, 0.04) | Suggestion hover |
results-text-color | No | text-color | Summary + headers |
card-text-color | No | text-color | Result cards |
results-columns | No | 3 | Results grid columns |
input-bg | No | #f5f5f5 | Input + dropdown bg |
card-bg | No | input-bg | Card background |
surface-color | No | #ffffff | Surfaces |
canvas-color | No | #fafafa | Canvas background |
image-object-fit | No | cover | cover or contain |
input-opacity | No | 1 | Input background opacity |
close-button | No | false | Shows close action |
Redirect and UX
The path the component redirects to after query submission.
The placeholder text shown before the user enters a query.
A JSON array of suggested queries shown in the dropdown.
The suggestions attribute must be valid JSON. Use single quotes around the attribute value and double quotes inside the array.
Theme and colors
For lower-level visual control, use
::part(...) selectors from the Advanced Styling guide.The default color palette. Options:
light, dark, or auto.Primary accent color for interactive UI elements.
Primary text color for component content.
Secondary text color for muted content.
Input text and icon color. Inherits from
text-color when not set.Text color for suggestion rows. Inherits from
input-text-color when not set.Background color for suggestion rows on hover.
Background color for the search input and suggestions dropdown.
Background color for card surfaces. Inherits from
input-bg if not set.Background color for surface layers.
Background color for the surrounding canvas.
Display controls
Text color for summary and section headers.
Text color used inside result cards.
Number of columns in the results grid.
Image sizing mode. Options:
cover or contain.Opacity for the input background.
Boolean attribute that enables the close action button when present.