@fluid-topics/ftds-combobox

Comboboxes for picking values from a list of suggestions: ftds-combobox (single value) and ftds-combobox-multi-value (several values). The documentation below covers ftds-combobox-multi-value.

Install

npm install @fluid-topics/ftds-combobox
yarn add @fluid-topics/ftds-combobox

Usage

import { html } from "lit"
import { FtdsComboboxMultiValueChangeEvent } from "@fluid-topics/ftds-combobox"
import "@fluid-topics/ftds-combobox/build/define"

function render() {
    return html`
        <ftds-combobox-multi-value
            label="Programming language"
            filterSuggestions
            .suggestionsProvider=${ (filter: string) => [
                { label: "Kotlin", value: "kotlin" },
                { label: "Rust", value: "rs" },
            ] }
            @change=${ (e: FtdsComboboxMultiValueChangeEvent) => console.log(e.detail.values) }
        ></ftds-combobox-multi-value>
    `
}

Suggestions

suggestionsProvider is a function (filter: string) => ComboboxSuggestion[] | Promise<ComboboxSuggestion[]>. It is called each time the user types (use debouncerTimeout to limit calls when fetching remotely).

A ComboboxSuggestion has the following shape:

• value (required): the identifier of the suggestion, used in the emitted value.
• label (optional): the text displayed. Falls back on value.
• template (optional): a lit TemplateResult rendered instead of the label in the suggestion list.

For a static list, basicSuggestionsProvider(values, maxSuggest) builds a provider that filters and sorts the given values.