select

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -27,7 +27,8 @@
                 <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>
-                    <FluentNavLink Href="forminputlist" Icon="@(new Icons.Regular.Size20.List())" IconColor="Color.Accent">List</FluentNavLink>
+                    <FluentNavLink Href="forminputlistbox" Icon="@(new Icons.Regular.Size20.List())" IconColor="Color.Accent">Listbox</FluentNavLink>
+                    <FluentNavLink Href="forminputselect" Icon="@(new Icons.Regular.Size20.GroupList())" IconColor="Color.Accent">Select</FluentNavLink>
                 </FluentNavGroup>
             </FluentNavGroup>
 

BlazorFluentUI/Components/Pages/FormInputs/FormInputListbox.razor

@@ -1,4 +1,4 @@
-@page "/forminputlist"
+@page "/forminputlistbox"
 
 @inject EmployeeService employeeService;
 

BlazorFluentUI/Components/Pages/FormInputs/FormInputSelect.razor

@@ -0,0 +1,116 @@
+@page "/forminputselect"
+
+@inject EmployeeService employeeService;
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Select</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentSelect</code> wrap a web component of a <code>select</code>.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentSelect TOption="Employee"
+                  Label="Select a employee"
+                  Items="@employeeService.GetFixedEmployeeData().Where(e => e.ID <= 15).ToList()"
+                  Id="employee-select"
+                  Height="150px"
+                  Placeholder="Make a selection..."
+                  OptionValue="@(e => e.ID.ToString())"
+                  OptionText="@(e => $"{e.LastName}, {e.FirstName}")"
+                  @bind-Value="defaultSelectedValue"
+                  @bind-SelectedOption="defaultSelectedEmployee"/>
+    <p>
+        <b>Selected value</b>: @defaultSelectedValue<br/>
+        <b>Selected Employee</b>: @defaultSelectedEmployee?.ToString();
+    </p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">From a list of <code>Option&lt;T&gt;</code></FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4 class="mt-2">From <code>Option&lt;string&gt</code> items</h4>
+    <FluentSelect Items="@stringOptions"
+                   OptionText="@(i => i.Text)"
+                   OptionValue="@(i => i.Value)"
+                   OptionSelected="@(i => i.Selected)"
+                   @bind-SelectedOption="selectedStringOption"
+                   @bind-Value="stringValue" />
+    <p>
+        Selected Value: @stringValue<br />
+        <strong>Selected Item</strong><br />
+        Value: @selectedStringOption?.Value (Type: @(selectedStringOption?.GetType())) <br />
+        Text: @selectedStringOption?.Text <br />
+    </p>
+
+    <h4 class="mt-2">From <code>Option&lt;int&gt</code> items</h4>
+    <FluentSelect Items="@intOptions"
+                   OptionText="@(i => i.Text)"
+                   OptionValue="@(i => i.Value.ToString())"
+                   OptionSelected="@(i => i.Selected)"
+                   OptionDisabled="@(i => i.Disabled)"
+                   @bind-SelectedOption="selectedIntOption"
+                   @bind-Value="intValue" />
+    <p>
+        Selected Value: @intValue<br />
+        <strong>Selected Item</strong><br />
+        Value: @selectedIntOption?.Value (Type: @(selectedIntOption?.GetType())) <br />
+        Text: @selectedIntOption?.Text <br />
+    </p>
+
+    <h4 class="mt-2">From <code>Option&lt;string&gt</code> items where multiple can be selected</h4>
+    <FluentSelect Items="@stringMultipleOptions"
+                  TOption="Option<string>"
+                  Multiple="true"
+                  OptionText="@(i => i.Text)"
+                  OptionValue="@(i => i.Value)"
+                  OptionSelected="@(i => i.Selected)"
+                  @bind-SelectedOptions="selectedStringMultipleOptions"
+                  Style="height:350px"/>
+    <p>
+        <strong>Selected string</strong>
+        @(selectedStringMultipleOptions == null ? "" : string.Join(',', selectedStringMultipleOptions.Select(v => v.Value)))<br/>
+    </p>
+</FluentCard>
+
+@code {
+    string? defaultSelectedValue;
+    Employee? defaultSelectedEmployee;
+
+    Option<string> selectedStringOption = default;
+    string? stringValue;
+    Option<int> selectedIntOption = default;
+    string? intValue;
+
+    List<Option<string>> stringOptions = new()
+    {
+        { new Option<string> { Value = "1", Text = "One" } },
+        { new Option<string> { Value = "2", Text = "Two", Selected = true } },
+        { new Option<string> { Value = "3", Text = "Three" } },
+        { new Option<string> { Value = "4", Text = "Four" } },
+        { new Option<string> { Value = "5", Text = "Five", Icon = (new Icons.Regular.Size24.AppFolder(), Color.Accent, "start") } },
+    };
+
+    List<Option<int>> intOptions = new()
+    {
+        { new Option<int> { Value = 1, Text = "1", Disabled = true, Icon = (new Icons.Regular.Size24.NumberCircle1(), Color.Accent, "start") } },
+        { new Option<int> { Value = 2, Text = "2", Icon = (new Icons.Regular.Size24.NumberCircle2(), Color.Accent, "end") } },
+        { new Option<int> { Value = 3, Text = "3", Icon = (new Icons.Regular.Size24.NumberCircle3(), Color.Accent, "start") } },
+    };
+
+    static IEnumerable<Option<string>>? selectedStringMultipleOptions = default;
+    List<Option<string>> stringMultipleOptions = new()
+    {
+        { new Option<string> { Value = "1", Text = "One" } },
+        { new Option<string> { Value = "2", Text = "Two", Selected = true } },
+        { new Option<string> { Value = "3", Text = "Three" } },
+        { new Option<string> { Value = "4", Text = "Four" } },
+        { new Option<string> { Value = "5", Text = "Five", Icon = (new Icons.Regular.Size24.AppFolder(), Color.Accent, "start") } },
+        { new Option<string> { Value = "6", Text = "Six" } },
+        { new Option<string> { Value = "7", Text = "Seven", Icon = (new Icons.Regular.Size24.Accessibility(), Color.Accent, "end"), Selected = true } },
+        { new Option<string> { Value = "8", Text = "Eight" } },
+        { new Option<string> { Value = "9", Text = "Nine", Icon = (new Icons.Regular.Size24.Fireplace(), Color.Accent, "start"), Selected = true } },
+
+    };
+}