Skip to main content

fast-combobox

As defined by the W3C:

A combobox is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values. In some implementations, the popup presents allowed values, while in other implementations, the popup presents suggested values, and users may either select one of the suggestions or type a value. The popup may be a listbox, grid, tree, or dialog. Many implementations also include a third optional element -- a graphical Open button adjacent to the combobox, which indicates availability of the popup. Activating the Open button displays the popup if suggestions are available.

Setup#

Basic Setup#

import {    provideFASTDesignSystem,    fastCombobox,    fastOption,} from "@microsoft/fast-components";
provideFASTDesignSystem().register(fastCombobox(), fastOption());

Customizing the indicator#

import {    provideFASTDesignSystem,    fastCombobox,    fastOption,} from "@microsoft/fast-components";
provideFASTDesignSystem().register(    fastCombobox({        indicator: `...your indicator...`,    }),    fastOption());

Usage#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Create your own design#

Combobox#

import {    Combobox,    ComboboxOptions,    comboboxTemplate as template,} from "@microsoft/fast-foundation";import { comboboxStyles as styles } from "./my-combobox.styles";
export const myCombobox = Combobox.compose<ComboboxOptions>({    baseName: "combobox",    template,    styles,    shadowOptions: {        delegatesFocus: true,    },    indicator: `...default indicator...`,});
note

This component is built with the expectation that focus is delegated to the input element rendered into the shadow DOM.

Option#

See listbox-option for more information.

Additional resources#