Listbox

An implementation of a listbox. While any DOM content is permissible as a child of the listbox, only FluentOption elements, option elements, and slotted items with role="option" will be treated as options and receive keyboard support.

The <FluentListbox> supports data binding, but does not hook in any events.

<FluentListbox> wraps the <fluent-listbox> element, a web component implementation of a listbox leveraging the Fluent UI design system.

Examples

Manual

Example
This option has no value This option is disabled This option has a value This option has an icon
This option is selected by default

Selected: Item 4

Download: 

Default

Example
Martin, JeanLanga, AntónioSmith, JulieSari, NurHernandez, Josede Vries, BertMartin, JaquesJohnson, ElizabethBerger, Jakob

Selected value:
Selected item:

Download: 

From a list of Option<T> items

Example

From a List of Option<string> items

Second item in the list is initially selected through the OptionSelected (Func delegate) parameter.

OneTwoThree

Selected Value: 2

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.

123

Selected Value:
Selected Item (strongly typed):
Value: (Type: )
Text:

Download: 

Long list

Example
Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachussets Michigain Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Texas Tennessee Utah Vermont Virginia Washington Wisconsin West Virginia Wyoming

Selected value:

Download: 

Long list with Width and Height

Example
Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachussets Michigain Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Texas Tennessee Utah Vermont Virginia Washington Wisconsin West Virginia Wyoming

Selected value:

Download: 

Option template

Example
Jean (Martin) António (Langa) Julie (Smith) Nur (Sari) Jose (Hernandez) Bert (de Vries) Jaques (Martin) Elizabeth (Johnson) Jakob (Berger)

Selected: ()

Download: 

Documentation

FluentListbox<TOption> Class

Parameters

Name
Type
Default
Description
AriaLabelstring?
Gets or sets the text used on aria-label attribute.
Autofocusbool
False
Determines if the element should receive document focus on page load.
ChangeOnEnterOnlybool
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.
ChildContentRenderFragment?
Gets or sets the content to be rendered inside the component.
In this case list of FluentOptions
Disabledbool
False
Disables the form control, ensuring it doesn't participate in form submission.
DisplayNamestring?
Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Embeddedbool
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.
FieldFieldIdentifier?
Gets or sets the FluentInputBase.FieldIdentifier that identifies the bound value.
If set, this parameter takes precedence over FluentInputBase.ValueExpression.
Heightstring?
Gets or sets the height of the component or of the popup panel.
Immediatebool
False
Change the content of this input field when the user write text (based on 'OnInput' HTML event).
ImmediateDelayint
0
Gets or sets the delay, in milliseconds, before to raise the FluentInputBase.ValueChanged event.
ItemsIEnumerable<TOption>?
Gets or sets the content source of all items to display in this list.
Each item must be instantiated (cannot be null).
Labelstring?
Gets or sets the text to label the input.
This is usually displayed just above the input
LabelTemplateRenderFragment?
Gets or sets the content to label the input component.
This is usually displayed just above the input
Multiplebool
False
If true, the user can select multiple elements.
⚠️ Only available for the FluentSelect and FluentListbox components.
Namestring?
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.
OptionComparerIEqualityComparer<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.
OptionDisabledFunc<TOption, bool>?
Gets or sets the function used to determine if an option is disabled.
OptionSelectedFunc<TOption, bool>?
Gets or sets the function used to determine if an option is initially selected.
OptionTemplateRenderFragment<TOption>?
Gets or sets the template for the ListComponentBase.Items items.
OptionTextFunc<TOption, string>
Gets or sets the function used to determine which text to display for each option.
OptionValueFunc<TOption, string>
Gets or sets the function used to determine which value to return for the selected item.
Only for FluentListbox and FluentSelect components.
Placeholderstring?
Gets or sets the short hint displayed in the input before the user enters a value.
ReadOnlybool
False
When true, the control will be immutable by user interaction. readonly HTML attribute for more information.
Requiredbool
False
Gets or sets a value indicating whether the element needs to have a value.
SelectedOptionTOption?
Gets or sets the selected item.
⚠️ Only available when Multiple = false.
SelectedOptionExpressionExpression<Func<TOption>>?
Gets or sets an expression that identifies the bound selected options.
⚠️ Only available when Multiple = false.
SelectedOptionsIEnumerable<TOption>?
Gets or sets all selected items.
⚠️ Only available when Multiple = true.
SelectedOptionsExpressionExpression<Func<IEnumerable<TOption>>>?
Gets or sets an expression that identifies the bound selected options.
⚠️ Only available when Multiple = true.
Sizeint
0
Gets or sets the maximum number of options that should be visible in the listbox scroll area.
Titlestring?
Gets or sets the text used on aria-label attribute.
Valuestring?
Gets or sets the value of the input. This should be used with two-way binding.
ValueExpressionExpression<Func<string>>?
Gets or sets an expression that identifies the bound value.
Widthstring?
Gets or sets the width of the component.

EventCallbacks

Name
Type
Description
SelectedOptionChangedEventCallback<TOption>
Called whenever the selection changed.
⚠️ Only available when Multiple = false.
SelectedOptionsChangedEventCallback<IEnumerable<TOption>>
Called whenever the selection changed.
⚠️ Only available when Multiple = true.
⚠️ When using manual options, the internal data structure cannot be updated reliably, because of this, the SelectedOptionsChanged event will not be triggered.
ValueChangedEventCallback<string>
Gets or sets a callback that updates the bound value.

Methods

Name
Parameters
Type
Description
DisposeAsyncValueTask
FocusAsyncvoid
Exposes the elements FocusAsync(bool preventScroll) method.
FocusAsyncbool preventScroll
void
Exposes the elements FocusAsync(bool preventScroll) method.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙