Select Dropdown

Demo & usage

More examples

<sv-select-dropdown
  [groups]="frameworkGroups"
  placeholder="Pick a stack"
  [(value)]="stack"
  (selectionChange)="onChange($event)" />

<sv-select-dropdown [options]="options" size="sm" variant="filled" [(value)]="value" />

<sv-select-dropdown
  [options]="results"
  [searchable]="true"
  [clearable]="true"
  searchPlaceholder="Search users…"
  noResultsText="No users match"
  (searchChange)="onSearch($event)"
  [(value)]="userId" />

<sv-select-dropdown
  [loadOptions]="searchPeople"
  [selectedOption]="current()"
  [searchable]="true"
  [minChars]="2"
  [(value)]="personId" />

<!-- searchPeople = (term: string, signal: AbortSignal) =>
       fetch(`/api/people?q=${encodeURIComponent(term)}`, { signal })
         .then((r) => r.json());

     Pass selectedOption too: a fetched list is whatever answers the
     current term, so a perfectly valid selection is routinely not in
     it — and without the hydration input the trigger calls it stale. -->

<sv-select-dropdown [source]="people" [selectedOption]="current()" [(value)]="personId">
  <ng-container svSelectSearch searchPlaceholder="Search people…" />
</sv-select-dropdown>

<!-- Pro adds windowing and bulk selection the same way: -->
<sv-select-dropdown-pro [options]="rows()" [multiple]="true" [maxSelected]="10" [(value)]="ids">
  <ng-container svSelectSearch />
  <ng-container svSelectVirtual [optionHeight]="52" />
  <ng-container svSelectBulk selectAllLabel="Add everyone" />
</sv-select-dropdown-pro>

<!-- people = svSelectSource<SelectOption>({
       search: (term, signal, { offset, limit }) => api.people(term, offset, limit, signal),
       pageSize: 50,   // rows per "Load more"; 0 = whole answer per term
       minChars: 2,
     }); -->

When to use

• Choosing one (or a few) options from a known, moderate-length list.
• You want search, grouping or rich option rendering beyond a native <select>.
• For free-text entry with suggestions use Autocomplete; for many tags use Tag Input.

Async states

• loading
• error
• retry
• partial

Outputs

<sv-select-dropdown-pro>

Also in this family — SvSelectDropdownProComponent from @styloviz-pro/select-dropdown.

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-select-dropdown
  [serverSide]="true"
  [options]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  [hasMore]="data.hasMore()"
  (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 `options`, `loading` and `error`.
• `serverSide` switches **off** the built-in filtering, sorting and paging. Leave it false and the component works entirely from the array you pass — which is what you want for a few hundred rows.
• `debounceMs` (default 300) collapses a burst of typing into one request. Set it to 0 only when the query is driven by clicks.
• `hasMore` and `loadMore` drive incremental paging; bind `hasMore` from the controller's own signal of the same name.
• 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

• Pass `options` (and `groups`) for grouped lists; each option supports `icon` (an icon-library name), `avatarUrl`, `sublabel`, `badge` / `badgeColor` and `disabled`.
• Toggle `multiple`, `searchable`, `clearable`; cap multi-select with `maxSelected` and size/style via `size` and `variant` (default · filled · flushed · floating).
• Pro: long flat lists window themselves above `virtualThreshold` (150), with `optionHeight` / `virtualViewportHeight` to override the derived sizes. Grouped lists are never windowed — headers and options are two different index spaces, and half-doing it would navigate wrongly.
• Pro: `showSelectAll` adds a tri-state bulk control to a multi-select. It acts on the VISIBLE, ENABLED options — not the whole array — deselects only what is on screen, and refuses (rather than filling up to) a `maxSelected` cap.
• Customise copy with `searchPlaceholder` and `noResultsText`; drive validation with `required`, `errorMessage` and `hint`.
• React to `selectionChange`, `dropdownOpen` / `dropdownClose`, and `searchChange` (for remote/async filtering).
• Composed shape (`FI-23-M1`): `svSelectSearch` (searchable, searchPlaceholder, noResultsText, loadingText, minChars, debounceMs, serverSide; `(searchChange)`), Pro `svSelectVirtual` (virtualThreshold, optionHeight, virtualViewportHeight) and Pro `svSelectBulk` (showSelectAll, selectAllLabel) are content children; an unbound member falls through to the select's own input. `[source]` takes `svSelectSource({ search, pageSize, minChars, debounceMs })` from `@styloviz/core` and outranks `loadOptions`. `maxSelected` stays on the select — it constrains the value. Free ships only `svSelectSearch`; the Pro directives share the same token and are ignored by the free select.
• `loadOptions` lets the component own the fetch: it drives `options`, `loading`, `stale` and `error` itself and implies `serverSide`, because a list it just fetched must not be re-filtered against the same term — that would hide the rows the server matched on fields the component cannot see. The host's own `loading` / `error` are OR-ed in rather than replaced, so you can still report a failure of your own. Opening fetches; closing aborts what is in flight but keeps what is on screen, so a live selection does not read as "Unavailable" the moment the panel shuts. `loadingText` is the copy for the first load.

Best practices

• Do: Enable search once the list passes ~8 options so users can type to filter.
• Do: Group long lists with `groups` and concise section labels.
• Don't: Avoid using a dropdown for 2–3 mutually exclusive choices — a Segmented Control or Radio Group is clearer.
• Tip: Provide a sensible `placeholder` describing the choice, not just "Select…".
• Do: Decide what happens when a selected value leaves the option list. The control no longer renders the PLACEHOLDER for it — that said "Select an option" while the form still held a value, so a user would read the field as empty and submit something they believed they never chose. It now reads `Unavailable (<id>)`, and `hasStaleValue()` / `staleValues()` let you react.
• Don't: Don't confuse a stale value with a hydrating one. `selectedOption` supplies the label for a value restored from a server before its list has loaded — that is "not yet", and it is not stale. "Not any more" is a value the list has actively dropped.
• Do: Prefer `loadOptions` over wiring `(searchChange)` yourself once the list comes from a server. The hand-rolled version needs a request guard so a slow answer to an abandoned term cannot overwrite a newer one, and that is the piece that gets left out — it looks correct in review and only misbehaves under latency you do not have locally.
• Don't: Don't combine `loadOptions` with `hasMore` / `loadMore`. A source returns the whole answer for a term, so there is nowhere for the component to append a page it did not ask for — keep paging host-driven through `options`. Dev mode warns if both are set.
• Do: Prefer the composed shape for new code: `[source]="svSelectSource({ search, pageSize })"` pages where `loadOptions` cannot, and `svSelectSearch` / `svSelectVirtual` / `svSelectBulk` keep each feature's settings together. The twenty-one inputs and outputs they replace are `@deprecated` (the JSDoc names each replacement) and keep working until the next major — deliberately with no console warning.

Accessibility

• Full ARIA combobox: `role="combobox"` with `aria-expanded`, `aria-haspopup`, `aria-controls` and `aria-activedescendant`; the popup is a `role="listbox"` of `role="option"` rows with stable ids.
• Keyboard: arrows, Home/End to move, Enter to select, Esc/Tab to close — the active option is scrolled into view and announced to screen readers.
• Pro, windowed lists: the active option is always kept mounted. `aria-activedescendant` names it by DOM id, and a window that unmounted it would leave that id dangling — the screen reader then announces nothing at all as the user arrows. The spacer rows are `aria-hidden` so a windowed listbox does not report two unreachable phantom items.
• A unique id is generated automatically so the `<label>` association, `aria-labelledby` and `aria-describedby` (hint/error) always resolve, even without `inputId`.
• Closes on outside click and returns focus to the trigger; programmatic `formControl.disable()` disables the native trigger.