Select
An implementation of an HTML select element web-component.
<FluentSelect> wraps the <fluent-select> element, a web component implementation of a select leveraging the
Fluent UI design system.
Note: When
multiple=truethe select list is always shown expanded.
Examples
Default
Selected value:
Selected person (strongly typed):
From a list of Option<T> items
From a List of Option<string> items
Second item in the list is initially selected through the OptionSelected (Func delegate) parameter.
Selected Value: 8
From a List of Option<int> items
First item in the list is disabled through the OptionDisabled (Func delegate) parameter.
Note that the second option in the list is automatically highlighted but it has NOT been selected. It's just the first item in the list available for selection
Selected Value:
Selected Item (strongly typed):
Value: (Type: )
Text:
From a list of Option<string> items where multiple can be selected
Items 2, 5 and 8 are initially selected through the OptionSelected (Func delegate) parameter.
Items with a value higher than 6 are disabled through the OptionDisabled (Func delegate) parameter.
Note that Item 8 is selected but also disabled and can therefore NOT be changed.
Selected strings: 2,5,8
Appearances
Filled
Stealth
Selected Value: Help!
Manual Options
Disabled Select
Disabled Option
Selected Option
Custom indicator
With custom indicator
Selected value:
With icons
Long list
Selected value:
Forced position
Forced position above
Forced position below
Multiple items
When the parameterMultipleis set totrue, the select list is always shown expanded. The current underlying web component does not support a dropdown
Selected value: 3
Reflects the value of the first selected option
Selected options: Smith, Sari
Strongly typed enumeration of the selected options. In this case a concatenated string of the last names of the selected options.
Multiple items with selected and disabled options
!!Experimental!!
All people whose first name starts with a "J" are initialy selected through the OptionSelected (Func delegate) parameter.
All people with a birth year greater than 1990 are disabled through the OptionDisabled (Func delegate) parameter.
Selected value:
Reflects the value of the first selected option
This value is not always accurate as a user can potentially deselect all enabled options. A browser will not return the value
of a disabled item so the last selected non-disabled value will be returned even if it is not selected anymore!
Selected options: Jean, Julie, Jose, Jaques, Jakob
Strongly typed enumeration of the selected options. In this case a concatenated string of the first names of the selected persons.
Option template
Selected: ()
Documentation
FluentSelect<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. | |
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. |
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? | Reflects the placement for the listbox when the select 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. ⚠️ When using manual options, the internal data structure cannot be updated reliably, because of this, the SelectedOptionsChanged event will not be triggered. |
ValueChanged | EventCallback<string> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | ||
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |