switch

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -35,6 +35,7 @@
                 <FluentNavLink Href="forminputrating" Icon="@(new Icons.Regular.Size20.Star())" IconColor="Color.Accent">Rating</FluentNavLink>
                 <FluentNavLink Href="forminputsearch" Icon="@(new Icons.Regular.Size20.ScreenSearch())" IconColor="Color.Accent">Search</FluentNavLink>
                 <FluentNavLink Href="forminputslider" Icon="@(new Icons.Regular.Size20.Options())" IconColor="Color.Accent">Slider</FluentNavLink>
+                <FluentNavLink Href="forminputswitch" Icon="@(new Icons.Regular.Size20.ToggleLeft())" IconColor="Color.Accent">Switch</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/FormInputs/FormInputSwitch.razor

@@ -0,0 +1,38 @@
+@page "/forminputswitch"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Switch</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentSwitch</code> wraps a web component of a <code>switch</code> element.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="5">
+        <FluentSwitch @bind-Value="dval1" AriaLabel="No label"/>
+        <FluentSwitch @bind-Value="dval2" Label="This is Label" />
+        <div>
+            <FluentSwitch @bind-Value="dval3" Label="On/Off Message">
+                <span slot="checked-message">On</span>
+                <span slot="unchecked-message">Off</span>
+            </FluentSwitch>
+            <p>Message: @dval3</p>
+        </div>
+        <FluentSwitch @bind-Value="dval4" Label="Checked/Unchecked" CheckedMessage="Checked" UncheckedMessage="Unchecked" />
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Inline</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentSwitch @bind-Value="inline1" Style="margin-inline-end:12px">Booster1</FluentSwitch>
+    <FluentSwitch @bind-Value="inline2" Style="margin-inline-end:12px">Booster2</FluentSwitch>
+    <FluentSwitch @bind-Value="inline3" Style="margin-inline-end:12px">Booster3</FluentSwitch>
+    <FluentSwitch @bind-Value="inline4" Style="margin-inline-end:12px">Booster4</FluentSwitch>
+</FluentCard>
+
+@code {
+    bool dval1, dval2, dval3 = true, dval4;
+    bool inline1, inline2, inline3, inline4;
+}