text field 1

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -36,7 +36,8 @@
                 <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>
-                <FluentNavLink Href="forminputtextarea" Icon="@(new Icons.Regular.Size20.ToggleLeft())" IconColor="Color.Accent">TextArea</FluentNavLink>
+                <FluentNavLink Href="forminputtextarea" Icon="@(new Icons.Regular.Size20.EditLineHorizontal3())" IconColor="Color.Accent">TextArea</FluentNavLink>
+                <FluentNavLink Href="forminputtexfield" Icon="@(new Icons.Regular.Size20.ColorLine())" IconColor="Color.Accent">TextField</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/FormInputs/FormInputTextField.razor

@@ -0,0 +1,39 @@
+@page "/forminputtexfield"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">TextField</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentTextField</code> wraps a web component of a <code>text field</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">
+        <div>
+            <h5>Without label</h5>
+            <FluentTextField @bind-Value="eval1" AriaLabel="No Label"/>
+            <p>You entered: @eval1</p>
+        </div>
+        <div>
+            <h5>With label</h5>
+            <FluentTextField @bind-Value="eval2" Label="This is Label" />
+            <p>You entered: @eval2</p>
+        </div>
+        <div>
+            <h5>Minlength</h5>
+            <FluentTextField @bind-Value="eval3" Label="Minlength" Minlength="4" />
+            <p>You entered: @eval3</p>
+        </div>
+        <div>
+            <h5>Maxlengthl</h5>
+            <FluentTextField @bind-Value="eval4" Label="Maxlengthl" Maxlength="4"/>
+            <p>You entered: @eval4</p>
+        </div>
+    </FluentStack>
+</FluentCard>
+
+@code {
+    string? eval1, eval2, eval3, eval4;
+}