Combobox

The W3C definition:

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.

fluent-combobox

Setup

Basic Setup

TypeScript

import {
    provideFluentDesignSystem,
    fluentCombobox,
    fluentOption
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentCombobox(),
        fluentOption()
    );

Customizing the indicator

TypeScript

import {
    provideFluentDesignSystem,
    fluentCombobox,
    fluentOption
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentCombobox({
          indicator: `...your indicator...`
        }),
        fluentOption()
    );

Example

FluentCombobox

<FluentCombobox> wraps the <fluent-combobox> element, a web component implementation of a combobox.

Usage

razor

@using Microsoft.Fast.Components.FluentUI
<FluentCombobox>
    <FluentOption>Extra Small</FluentOption>
    <FluentOption>Small</FluentOption>
    <FluentOption>Medium</FluentOption>
    <FluentOption>Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

Example

See the component in action with implementation examples at the Blazor demo site.