Search Bar

Demo & usage

More examples

<sv-search-bar
  placeholder="Search…"
  shortcutHint="⌘K"
  [filters]="filters"
  [loading]="isSearching"
  (searched)="run($event)" />

<sv-search-bar-pro
  [suggestions]="suggestions"
  [groupByCategory]="true"
  (searched)="run($event)" />

When to use

• Providing prominent search over a dataset with live suggestions.
• You want scoped filters and a keyboard-shortcut affordance in the header.
• For a full command/action launcher, use the Command Palette instead.

Async states

• loading
• empty
• error
• retry

Outputs

<sv-search-bar-pro>

Also in this family — SvSearchBarProComponent from @styloviz-pro/search-bar.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-search-bar
  [suggestions]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `suggestions`, `loading` and `error`.
• `debounceMs` (default 300) collapses a burst of typing into one request. Set it to 0 only when the query is driven by clicks.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Provide `suggestions` (with icon type, sublabel and badge) and removable `filters` chips; add a `suggestionsLabel` header and `footerLabel` action.
• Pick a `variant` (default · filled · borderless · floating) and `size`; toggle `showSearchIcon`, add a `shortcutHint` and a `loading` spinner.
• Section the dropdown with `groupByCategory` — set each suggestion's `category` (pre-sorted so same-category rows are contiguous) and a header renders before every new run.
• Tune `placeholder`, `debounceMs` and `ariaLabel`; react to `searched`, `submitted`, `suggestionSelected`, `filterRemoved`, `footerClick` and `cleared`.

Best practices

• Do: Debounce input (`debounceMs`) so you don't fire a request on every keystroke.
• Do: Show a `loading` state while results stream in.
• Don't: Don't block typing while fetching — keep the field responsive.

Accessibility

• Correct ARIA combobox: `role="combobox"` sits on the `<input>` with `aria-expanded`, `aria-haspopup`, `aria-controls` and `aria-activedescendant`; the popup is a `role="listbox"` of `role="option"` rows.
• All ids are generated per instance, so multiple search bars on one page don't collide; arrow keys move the highlighted option, Enter selects, Escape closes and returns focus.
• The accessible name comes from `ariaLabel` → `label` → `placeholder`, and `aria-busy` is set while `loading`.