hb-searchbar — searchbar

Category: utilities
Tags: utilities, search

What it does

Search field with optional dropdown searchlist (id, text, icons, badges, tags, URLs). Configure value, searchlabel, textarea, minlength, disable_preview, disabled, and CSS parts for the input and menu. Dispatches search and clear.

Custom element

hb-searchbar

Attributes (snake_case; use string values in HTML)

• id, style (optional): strings.
• value (required): string — current query text.
• searchlabel (optional): string — placeholder for the input (search is triggered by the in-field magnifier or Enter).
• minlength (optional): number as string.
• searchlist (optional): JSON string — TSearchListItem[] (id, text, optional url, icon, tags, badge, number_of_results, fixed).
• input_info (optional): JSON string — single TSearchListItem for input adornment.
• textarea (optional): "yes" | "true" | "" — multiline input mode.
• disable_preview (optional): "yes" | "no" | "true" | "false" | "on" | "off".
• disabled (optional): "yes" | "no" — when "yes", the input/textarea and action buttons are disabled.

Events

• search: { input: string; by: "button" | "input" | "searchlist" }.
• clear: { id: string }.

Usage notes

• Browser autofill: the search field uses autocomplete="off" so native address/password suggestions and similar do not target this control (browser support varies; password managers may still offer fills).

• CSS parts: dropdown-menu, search-input, search-input-glass (frosted layer under the field when the input is focused), search-submit (magnifier button inside the field).

• Styling: Bulma field with a single expanded control; the search icon sits on the right as a search-submit control. Dropdown and field styles live in the shadow root (styles/bulma.scss + webcomponent.scss). Prefer Bulma CSS variables on the host or ancestors: e.g. --bulma-primary (focus glow, search-button hover, suggestion row accents), --bulma-background, --bulma-border, and --bulma-primary (host strip: default resting/focus tints on hb-searchbar itself; input/textarea are transparent at rest so that shows through), --bulma-scheme-main, --bulma-border-weak, --bulma-text, --bulma-text-strong, --bulma-input-placeholder-color, --bulma-danger (clear button), --bulma-radius, --bulma-radius-small, --bulma-dropdown-content-z. Component-only: --hb-searchbar-host-background, --hb-searchbar-host-background-focus (:host), --hb-searchbar-input-strip-background (darker input row at rest), --hb-searchbar-dropdown-panel-background (lighter list panel), --hb-searchbar-input-glass-blur, --hb-searchbar-input-glass-saturate (frosted layer on input focus only). The primary-colored diffuse glow while the input/textarea is focused wraps the whole root (including the open dropdown) as one outline.

• Storybook may list initial_value; runtime props follow webcomponent.type.d.ts (value is required).

Minimal HTML example

<hb-searchbar
  value=""
  searchlabel="Search"
  searchlist='[{"id":"1","text":"Suggestion"}]'
></hb-searchbar>