microsoft · dvoituron · Jan 9, 2026 · Jan 9, 2026 · Jan 9, 2026 · Jan 9, 2026
@@ -1,4 +1,4 @@
-<FluentSelect TOption="ImageFit" Items="@(Enum.GetValues<ImageFit>())" @bind-Value="@_selectedFit" />
+<FluentSelect Items="@(Enum.GetValues<ImageFit>())" @bind-Value="@_selectedFit" />
 <div style="width: auto; height: 400px; margin-top: 10px">
     <FluentImage Fit="@_selectedFit" Source="/big-heart.jpg" AlternateText="Placeholder Image" />
 </div>

@@ -1,4 +1,4 @@
-<FluentSelect TOption="ImageShape" Items="@(Enum.GetValues<ImageShape>())" @bind-Value="@_selectedShape" />
+<FluentSelect Items="@(Enum.GetValues<ImageShape>())" @bind-Value="@_selectedShape" />
 <div style="width: auto; height: 300px; margin-top: 10px">
     <FluentImage Shape="@_selectedShape" Source="/big-heart.jpg" AlternateText="Placeholder Image" />
 </div>

@@ -1,9 +1,8 @@
 <FluentCombobox Label="Countries"
-                TOption="@SampleData.Olympics2024.Country"
                 Placeholder="Select your countries"
                 Multiple="true"
                 OptionText="@(i => i?.Name)"
-                OptionValue="@(i => i?.Code)"
+                OptionBindedValue="@(i => i?.Code)"
                 Items="@Countries"
                 @bind-SelectedItems="@SelectedCountries">
                 <FreeOption>

@@ -49,20 +49,20 @@ See a similar example on the [FluentSelect](/List/Select#appearance) page.
 You can customize the items in the **FluentSelect** component by using Lambda expressions.
 The following example shows how to customize the items:
 - `OptionText`: This function is used to customize the text of the option. <br />
-- `OptionValue`: This function is used to customize the value of the option. <br />
+- `OptionBindedValue`: This function is used to customize the value of the option. <br />
 - `OptionDisabled`: This function is used to define the disabled options. <br />
 
 See a similar example on the [FluentSelect](/List/Select#customize-the-items) page.
 
 ## API FluentCombobox
 
-{{ API Type=FluentCombobox }}
+{{ API Type=FluentCombobox<string,string> }}
 
 > [!NOTE] The `Width` parameter is not yet implemented.
 
 ## API FluentOption
 
-{{ API Type=FluentOption }}
+{{ API Type=FluentOption<string> }}
 
 ## Migrating to v5
 

@@ -1,15 +1,15 @@
-<FluentOption Selected>
+<FluentOption TValue="string" Selected>
     <FluentAvatar Size="AvatarSize.Size16" Color="AvatarColor.Blue" Slot="@FluentSlot.Start">16</FluentAvatar>
     Option with 16px avatar
 </FluentOption>
 <br />
 
-<FluentOption>
+<FluentOption TValue="string">
     <FluentIcon Value="@(new Icons.Regular.Size24.Globe())" Color="Color.Error" Slot="@FluentSlot.Start" />
     Option with 24px icon
 </FluentOption>
 <br />
-<FluentOption Selected Description="Additional information can be provided with the description parameter">
+<FluentOption TValue="string" Selected Description="Additional information can be provided with the description parameter">
     <FluentAvatar Size="AvatarSize.Size32" Color="AvatarColor.Blue" Slot="@FluentSlot.Start">32</FluentAvatar>
     Option with 32px avatar
 </FluentOption>
@@ -42,5 +42,5 @@
 
 @code {
     static string[] Colors = ["Red", "Green", "Blue"];
-    string Value = "Red";
+    string Value = "Green";
 }
@@ -14,8 +14,7 @@
 
 @code {
     static Samples.Person?[] OneNullPerson = new Samples.Person?[] { null };
-    static Samples.Person?[] Coworkers =>
-          OneNullPerson.Union(Samples.Persons.Take(5).ToArray()).ToArray();
+    static Samples.Person?[] Coworkers = OneNullPerson.Union(Samples.Persons.Take(5).ToArray()).ToArray();
 
     Samples.Person? Value = Coworkers.ElementAt(2);
 }
@@ -0,0 +1,40 @@
+<!-- Using Items -->
+<FluentSelect Label="Language"
+              Items="@Languages"
+              @bind-Value="@SelectedId1"
+              OptionText="@(i => i.Name)"
+              OptionBindedValue="@(i => i.Id)" />
+
+<!-- Using FluentOptions -->
+<FluentSelect Label="Language"
+              TOption="Language"
+              TValue="int"
+              @bind-Value="@SelectedId2">
+    @foreach (var language in Languages)
+    {
+        <FluentOption Value="@language.Id">
+            @language.Name
+        </FluentOption>
+    }
+</FluentSelect>
+
+<div>
+    IDs: (@SelectedId1, @SelectedId2)
+</div>
+
+@code {
+
+    int SelectedId1 = 3;
+    int SelectedId2 = 3;
+
+    static Language[] Languages = new Language[]
+    {
+        new(1, "C#"),
+        new(2, "Java"),
+        new(3, "Python"),
+        new(4, "JavaScript"),
+        new(5, "Go")
+    };
+
+    record Language(int Id, string Name);
+}
@@ -1,9 +1,11 @@
-<FluentSelect Label="RGB Color"
+<FluentSelect TOption="string"
+              TValue="string"
+              Label="RGB Color"
               Placeholder="Select a color"
               @bind-Value="@Value">
-    <FluentOption Value="#ff0000">Red</FluentOption>
-    <FluentOption Value="#00ff00">Green</FluentOption>
-    <FluentOption Value="#0000ff">Blue</FluentOption>
+    <FluentOptionString Value="ff0000">Red</FluentOptionString>
+    <FluentOptionString Value="00ff00">Green</FluentOptionString>
+    <FluentOptionString Value="0000ff">Blue</FluentOptionString>
 </FluentSelect>
 
 <div>

@@ -8,7 +8,7 @@
               @bind-Value="@Selected" />
 
 <div>
-    Selected: @Selected?.FirstName
+    Selected: @Selected?.FirstName @Selected?.LastName
 </div>
 
 @code {

@@ -5,6 +5,8 @@
 <FluentSelect Label="Color"
               Placeholder="Select colors"
               Items="@Colors"
+              TOption="string"
+              TValue="string"
               @bind-SelectedItems="@SelectedItems"
               Multiple="true" />
 

@@ -30,7 +30,7 @@ You can customize the items in the **FluentSelect** component by using Lambda ex
 The following example shows how to customize the items:
 - `OptionText`: This function is used to customize the text of the option.  
    In the following example, the **FirstName** is used.
-- `OptionValue`: This function is used to customize the value of the option.  
+- `OptionBindedValue`: This function is used to customize the value of the option.  
    In the following example, the **Id** is returned.
 - `OptionDisabled`: This function is used to define the disabled options.  
    In the following example, the third element is disabled.
@@ -77,8 +77,17 @@ An option can also use the `Description` parameter to display additional informa
 
 An example of using the `FluentOption` components directly in the `Select` is shown below.
 
+**Notes:**
+1. The two parameters `TOption="string"` and `TValue="string"` are required to indicate the type of options.
+1. To simplify writing a `<FluentOption TValue="string">` we introduced a `<FluentOptionString>`.
+   This component simply and directly inherits from `FluentOption<string>`.
+
 {{ SelectManual }}
 
+Demonstrates two-way data binding with `FluentSelect` using `@bind-Value` to bind an integer value from a collection of a complex object.
+
+{{ SelectLanguage }}
+
 ## Many items
 
 You can use this component with a large number of items.
@@ -89,13 +98,11 @@ If you have a very large number of items, you should use the **FluentAutocomplet
 
 ## API FluentSelect
 
-{{ API Type=FluentSelect }}
-
-> [!NOTE] The `Width` parameter is not yet implemented.
+{{ API Type=FluentSelect<string,string> }}
 
 ## API FluentOption
 
-{{ API Type=FluentOption }}
+{{ API Type=FluentOption<string> }}
 
 ## Migrating to v5
 

@@ -11,6 +11,7 @@
 <FluentSelect Items="@([true, false, null])"
               OptionText="@(i => GetVisibleText(i) )"
               TOption="bool?"
+              TValue="bool?"
               @bind-Value="@Visible" />
 
 @code

@@ -11,6 +11,7 @@
 <FluentSelect Items="@([true, false, null])"
               OptionText="@(i => GetVisibleText(i) )"
               TOption="bool?"
+              TValue="bool?"
               @bind-Value="@Visible" />
 
 @code

@@ -122,28 +122,42 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         var componentType = "";
 
         // Convert "MyComponent<MyType>" to ("MyComponent", "MyType")
-        var match = Regex.Match(name, @"(\w+)<(\w+)>");
+        var match = Regex.Match(name, @"(\w+)(&lt;|<)(.+)(>|&gt;)");
         if (match.Success)
         {
             componentName = match.Groups[1].Value;
-            componentType = match.Groups[2].Value;
+            componentType = match.Groups[3].Value;
         }
 
         // Get the component type
         var type = DocViewerService.ApiAssembly
                                   ?.GetTypes()
-                                  ?.FirstOrDefault(i => i.Name == componentName || i.Name.StartsWith($"{componentName}`1"));
+                                  ?.FirstOrDefault(i => i.Name == componentName
+                                                     || i.Name.StartsWith($"{componentName}`1")
+                                                     || i.Name.StartsWith($"{componentName}`2"));
 
         // Create the ApiClass
         var result = type is null ? null : new ApiClass(DocViewerService, type, allProperties);
 
         // if the component type is specified, set the InstanceTypes
         if (result != null && !string.IsNullOrEmpty(componentType))
         {
-            type = ReflectionExtensions.KnownTypeNames
-                                       .FirstOrDefault(i => string.Compare(i.Value, componentType, StringComparison.InvariantCultureIgnoreCase) == 0)
-                                       .Key;
-            result.InstanceTypes = [type];
+            var listOfTypes = new List<Type>();
+
+            foreach (var typeName in componentType.Split(','))
+            {
+                var t = ReflectionExtensions.KnownTypeNames
+                                               .FirstOrDefault(i => string.Compare(i.Value, typeName.Trim(), StringComparison.InvariantCultureIgnoreCase) == 0)
+                                               .Key;
+
+                if (t is not null)
+                {
+                    listOfTypes.Add(t);
+                }
+            }
+
+
+            result.InstanceTypes = listOfTypes.ToArray();
         }
 
         return result;

@@ -148,6 +148,12 @@ public record Person(string Id, string FirstName, string LastName, bool Male, st
         /// Gets the age of the person
         /// </summary>
         public int Age => DateTime.Today.Year - BirthDay.Year;
+
+        /// <summary />
+        public override string ToString()
+        {
+            return $"{Id} - {FirstName} {LastName}";
+        }
     }
 
     /// <summary>

@@ -6,7 +6,8 @@
 {
     <FluentCombobox @ref="_fluentCombobox"
                     Id="@Id"
-                    TOption="DateTime ?"
+                    TOption="DateTime?"
+                    TValue="DateTime?"
                     Class="@ClassValue"
                     Style="@StyleValue"
                     Label="@Label"

@@ -15,7 +15,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentTimePicker<TValue> : FluentInputBase<TValue>
 {
     private DateTime DefaultTime => Culture.Calendar.MinSupportedDateTime;
-    private FluentCombobox<DateTime?> _fluentCombobox = default!;
+    private FluentCombobox<DateTime?, DateTime?> _fluentCombobox = default!;
 
     /// <summary />
     public FluentTimePicker(LibraryConfiguration configuration) : base(configuration)
@@ -186,7 +186,7 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa
         {
             DateTime dt => dt.ToString("HH:mm:ss", CultureInfo.InvariantCulture),
             TimeOnly to => to.ToString("HH:mm:ss", CultureInfo.InvariantCulture),
-            _ => null
+            _ => null,
         };
     }
 
@@ -241,7 +241,7 @@ private TextInputAppearance TextInputAppearance
                 ListAppearance.FilledDarker => TextInputAppearance.FilledDarker,
                 ListAppearance.Outline => TextInputAppearance.Outline,
                 ListAppearance.Transparent => TextInputAppearance.Underline,
-                _ => TextInputAppearance.Outline
+                _ => TextInputAppearance.Outline,
             };
         }
     }

@@ -9,8 +9,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// <summary>
 /// A FluentCombobox allows one option to be selected from multiple items.
 /// </summary>
-/// <typeparam name="TOption"></typeparam>
-public partial class FluentCombobox<TOption> : FluentSelect<TOption>
+[CascadingTypeParameter(nameof(TValue))]
+public partial class FluentCombobox<TOption, TValue> : FluentSelect<TOption, TValue>
 {
     /// <summary />
     public FluentCombobox(LibraryConfiguration configuration) : base(configuration) { }

@@ -1,7 +1,8 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @using Microsoft.AspNetCore.Components.Rendering
-@inherits FluentInputBase<TOption>
+@inherits FluentInputBase<TValue>
 @typeparam TOption
+@typeparam TValue
 
 @code
 {
@@ -24,8 +25,9 @@
             }
 
             foreach (var item in Items)
-            {                
-                <FluentOption Data="@item"
+            {
+                <FluentOption TValue="TValue"
+                              Data="@item"
                               Text="@GetOptionText(item)"
                               Value="@GetOptionValue(item)"
                               Selected="@(GetOptionSelected(item))"
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
                   @bind-Value="@Selected" />
     <div>
-        Selected: @Selected?.FirstName
+        Selected: @Selected?.FirstName @Selected?.LastName
     </div>
     @code {
@@ Expand Down @@