radio

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -31,6 +31,7 @@
                     <FluentNavLink Href="forminputselect" Icon="@(new Icons.Regular.Size20.GroupList())" IconColor="Color.Accent">Select</FluentNavLink>
                 </FluentNavGroup>
                 <FluentNavLink Href="forminputnumberfield" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">NumberField</FluentNavLink>
+                <FluentNavLink Href="forminputradio" Icon="@(new Icons.Regular.Size20.RadioButton())" IconColor="Color.Accent">Radio</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/FormInputs/FormInputRadio.razor

@@ -0,0 +1,91 @@
+@page "/forminputradio"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Radio</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentRadio</code> wrap a web component of a <code>radio</code> element.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <p>
+        without a lable:
+        <FluentRadioGroup @bind-Value="value1">
+            <FluentRadio AriaLabel="Radio without label"/>
+        </FluentRadioGroup>
+    </p>
+    <p>
+        with a lable:
+        <FluentRadioGroup @bind-Value="value2">
+            <FluentRadio Label="Radio with label" />
+        </FluentRadioGroup>
+    </p>
+    <p>
+        with group and radio label
+        <FluentRadioGroup @bind-Value="value3" Label="RadioGroup label">
+            <FluentRadio Label="Radio label" />
+        </FluentRadioGroup>
+    </p>
+</FluentCard>
+
+<FluentLabel Class="mt-5" Typo="Typography.H3">RadioGroup</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentRadioGroup</code> wrap a web component of a <code>radio group</code> element.
+</FluentLabel>
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentRadioGroup Name="numbers" @bind-Value="intValue" Label="Numbers">
+        <FluentRadio Value="1">One</FluentRadio>
+        <FluentRadio Value="2">Two</FluentRadio>
+        <FluentRadio Value="3">Three</FluentRadio>
+    </FluentRadioGroup>
+    <p>Selected: @intValue (@intValue?.GetType())</p>
+    <FluentRadioGroup Name="strings" @bind-Value="stringValue" Label="Strings">
+        <FluentRadio Value="@("one")">One</FluentRadio>
+        <FluentRadio Value="@("two")">Two</FluentRadio>
+        <FluentRadio Value="@("three")">Three</FluentRadio>
+    </FluentRadioGroup>
+    <p>Selected: @stringValue (@stringValue?.GetType())</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">In a toolbar</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentToolbar Id="toolbar-fluent-components">
+        <FluentButton Appearance="Appearance.Accent">Go</FluentButton>
+        <FluentRadioGroup Required="true" Name="navigation" @bind-Value="toolbarValue">
+            <FluentRadio Value="@("back")">⬅️</FluentRadio>
+            <FluentRadio Value="@("refresh")">🔄️</FluentRadio>
+            <FluentRadio Value="@("foward")">➡️</FluentRadio>
+        </FluentRadioGroup>
+        <FluentButton Appearance="Appearance.Accent">Stop</FluentButton>
+    </FluentToolbar>
+    <p>Selected: @toolbarValue</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">With Preset</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <h4>Preset value</h4>
+    <FluentRadioGroup @bind-Value="pilot" Name="best-pilot" Label="Preset selected-value">
+        <FluentRadio Value="@("ice-man")">Ice Man</FluentRadio>
+        <FluentRadio Value="@("maverick")">Maverick</FluentRadio>
+        <FluentRadio Value="@("viper")">Viper</FluentRadio>
+        <FluentRadio Value="@("jester")">Jester</FluentRadio>
+    </FluentRadioGroup>
+    <p>The best pilot according to you is: @pilot!</p>
+
+    <p>Your favorite pilot: @pilot!</p>
+</FluentCard>
+
+@code {
+    string? value1, value2, value3;
+
+    int? intValue;
+    string? stringValue;
+
+    string? toolbarValue;
+
+    string? pilot = "maverick";
+}