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.
<FluentCombobox> wraps the <fluent-combobox> element, a web component implementation of a combobox.
Due to the fact that a combobox allows the user to enter a value, it is impossible to return an OptionValue
Examples
Default examples
Select the best song from the list or type your own
Selected hit:
Pre-selected option
Selected name: Nur Sari
With Placeholder
Selected size:
Download:
From a list of Option<T> items
From list of Option<string> items
Second item in the list is initially selected through the OptionSelected (Func delegate) parameter.
Selected Value: 2
Selected Item (strongly typed):
Value: 2 (Type: Microsoft.FluentUI.AspNetCore.Components.Option`1[System.String])
Text: Two
From list of Option<int> items
First item in the list is disabled through the OptionDisabled (Func delegate) parameter.
Note that none of the options is initially highlighted or selected.
Selected Value:
Selected Item (strongly typed):
Value: (Type: )
Text:
Download:
Disabled examples
Disabled Combobox
Combobox with disabled items
Combobox with all items disabled
Note that 'Small' has been selected through the @bind-Value callback and cannot be changed.
Download:
Appearance example
Filled
Selected Value: Help!
Download:
Autocomplete examples
Inline Autocomplete
List Autocomplete
Both Autocomplete
Download:
List examples
With long list
With forced position above
with forced position below
Download:
Option template
Selected option:
Selected value:
Download:
Documentation
FluentCombobox<TOption> Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | Appearance? | Gets or sets the visual appearance. See Appearance | |
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
Autocomplete | ComboboxAutocomplete? | Gets or sets a value indicating whether the element auto completes. See ComboboxAutocomplete | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
ChangeOnEnterOnly | bool | False | Gets or sets whether using the up and down arrow keys should change focus and select immediately or that selection is done only on Enter. ⚠️ Only applicable in single select scenarios. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. In this case list of FluentOptions | |
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
EnableClickToClose | bool? | False | Gets or sets the option to allow closing the FluentCombobox list by clicking the dropdown button. Default is false. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
Height | string? | Gets or sets the height of the component or of the popup panel. | |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Items | IEnumerable<TOption>? | Gets or sets the content source of all items to display in this list. Each item must be instantiated (cannot be null). | |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
Multiple | bool | False | If true, the user can select multiple elements. ⚠️ Only available for the FluentSelect and FluentListbox components. |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
Open | bool? | Gets or sets the open attribute. | |
OptionComparer | IEqualityComparer<TOption>? | Gets or sets the Generic.IEqualityComparer used to determine if an option is already added to the internal list.⚠️ Only available when Multiple = true. | |
OptionDisabled | Func<TOption, bool>? | Gets or sets the function used to determine if an option is disabled. | |
OptionSelected | Func<TOption, bool>? | Gets or sets the function used to determine if an option is initially selected. | |
OptionTemplate | RenderFragment<TOption>? | Gets or sets the template for the ListComponentBase items. | |
OptionText | Func<TOption, string> | Gets or sets the function used to determine which text to display for each option. | |
OptionValue | Func<TOption, string> | Gets or sets the function used to determine which value to return for the selected item. Only for FluentListbox and FluentSelect components. | |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
Position | SelectPosition? | Below | Gets or sets the placement for the listbox when the combobox is open. See SelectPosition |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
SelectedOption | TOption? | Gets or sets the selected item. ⚠️ Only available when Multiple = false. | |
SelectedOptionExpression | Expression<Func<TOption>>? | Gets or sets an expression that identifies the bound selected options. ⚠️ Only available when Multiple = false. | |
SelectedOptions | IEnumerable<TOption>? | Gets or sets all selected items. ⚠️ Only available when Multiple = true. | |
SelectedOptionsExpression | Expression<Func<IEnumerable<TOption>>>? | Gets or sets an expression that identifies the bound selected options. ⚠️ Only available when Multiple = true. | |
Title | string? | Gets or sets the text used on aria-label attribute. | |
Value | string? | Gets or sets the value of the input. This should be used with two-way binding. | |
ValueExpression | Expression<Func<string>>? | Gets or sets an expression that identifies the bound value. | |
Width | string? | Gets or sets the width of the component. |
EventCallbacks
Name | Type | Description |
|---|---|---|
SelectedOptionChanged | EventCallback<TOption> | Called whenever the selection changed. ⚠️ Only available when Multiple = false. |
SelectedOptionsChanged | EventCallback<IEnumerable<TOption>> | Called whenever the selection changed. ⚠️ Only available when Multiple = true. |
ValueChanged | EventCallback<string> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | ||
DisposeAsync | ValueTask | ||
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |