npm package: @htmlbricks/hb-searchbar
Description: Search field with optional dropdown `searchlist` (id, text, icons, badges, tags, URLs). Configure `value`, `initial_value`, `searchlabel`, `textarea`, `minlength`, `disable_preview`, `disabled`, and CSS parts for the input and menu. Dispatches `search` an
Latest version: 0.71.18

## `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](https://bulma.io/documentation/features/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

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