combobox 1

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -25,6 +25,9 @@
                 <FluentNavLink Href="forminputoverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
                 <FluentNavLink Href="forminputcheckbox" Icon="@(new Icons.Regular.Size20.CheckboxChecked())" IconColor="Color.Accent">Checkbox</FluentNavLink>
                 <FluentNavLink Href="forminputfile" Icon="@(new Icons.Regular.Size20.ArrowUpload())" IconColor="Color.Accent">InputFile</FluentNavLink>
+                <FluentNavGroup Icon="@(new Icons.Regular.Size20.List())" Expanded="false" Title="List">
+                    <FluentNavLink Href="forminputcombobox" Icon="@(new Icons.Regular.Size20.BoxCheckmark())" IconColor="Color.Accent">Combobox</FluentNavLink>
+                </FluentNavGroup>
             </FluentNavGroup>
 
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor

@@ -0,0 +1,36 @@
+@page "/forminputcombobox"
+
+@inject TestDataService dataService;
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Combobox</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentCombobox</code> wrap a web component of a <code>combobox</code>.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="450px" Style="overflow: visible">
+    <h4>Select the T-shirt of best song from the list</h4>
+    <FluentCombobox Placeholder="Select song..." Label="Song" Autofocus="true"
+                    Items="@dataService.Songs" @bind-Value="song"/>
+    <FluentCombobox Placeholder="Select singer..." Label="Singer"
+                    Items="@dataService.Singers" @bind-Value="singer" />
+    <FluentCombobox Placeholder="Select size..." Label="Size"
+                    Items="@dataService.Sizes" @bind-Value="size" />
+    <div>
+        Result: Lable <span>@song?</span>, Image <span>@singer?</span>, Size <span>@size?</span>
+    </div>
+</FluentCard>
+
+@code {
+    string? song;
+    string? singer;
+    string? size;
+
+    protected override void OnInitialized()
+    {
+        singer = dataService.Singers.FirstOrDefault();
+    }
+}

BlazorFluentUI/Program.cs

@@ -16,6 +16,7 @@ builder.Services.AddRazorComponents(options =>
 builder.Services.AddFluentUIComponents();
 
 builder.Services.AddSingleton<CountryService>();
+builder.Services.AddSingleton<TestDataService>();
 
 var app = builder.Build();
 

BlazorFluentUI/Services/TestDataService.cs

@@ -0,0 +1,62 @@
+namespace BlazorFluentUI.Services
+{
+    public class TestDataService
+    {
+        public List<string> Songs { get; set; }
+        public List<string> Singers { get; set; }
+        public List<string> Sizes { get; set; }
+
+        public TestDataService()
+        {
+            Songs = GenerateRandomHitSongs();
+            Singers = GenerateRandomSingers();
+            Sizes = GenerateRandomSizes();
+        }
+
+        private List<string> GenerateRandomHitSongs()
+        {
+            var random = new Random();
+            var songs = new List<string>
+            {
+                "Bohemian Rhapsody", "Imagine", "Hey Jude", "Like a Rolling Stone", "I Can't Get No Satisfaction",
+                "Good Vibrations", "Smells Like Teen Spirit", "What's Going On", "Hotel California", "One"
+            };
+
+            var hitSongs = new List<string>();
+            for (int i = 0; i < 5; i++)
+            {
+                hitSongs.Add(songs[random.Next(songs.Count)]);
+            }
+
+            return hitSongs;
+        }
+
+        private List<string> GenerateRandomSingers()
+        {
+            var random = new Random();
+            var singers = new List<string>
+            {
+                "The Beatles", "Elvis Presley", "Michael Jackson", "Madonna", "Elton John",
+                "Led Zeppelin", "Pink Floyd", "Queen", "The Rolling Stones", "U2"
+            };
+
+            var randomSingers = new List<string>();
+            for (int i = 0; i < 5; i++)
+            {
+                randomSingers.Add(singers[random.Next(singers.Count)]);
+            }
+
+            return randomSingers;
+        }
+
+        private List<string> GenerateRandomSizes()
+        {
+            var sizes = new List<string>
+            {
+                "Extra Small", "Small", "Medium", "Large", "Extra Large", "Extra Extra Large"
+            };
+
+            return sizes;
+        }
+    }
+}