text area

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -36,6 +36,7 @@
                 <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>
             </FluentNavGroup>
 
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/FormInputs/FormInputTextArea.razor

@@ -0,0 +1,60 @@
+@page "/forminputtextarea"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">TextArea</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentTextArea</code> wraps a web component of a <code>text area</code> element.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4>Without Label</h4>
+    <FluentTextArea Class="mb-5" AriaLabel="Without Label" @bind-Value="eval1" />
+    <h4>With Label</h4>
+    <FluentTextArea Label="This is Label" @bind-Value="eval2" />
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Rows and Cols</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4>12 Rows</h4>
+    <FluentTextArea Class="mb-5" Rows="12" @bind-Value="rcvalue1" />
+    <h4>12Cols</h4>
+    <FluentTextArea Cols="60" @bind-Value="rcvalue2" />
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Display and Resize</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4>Full Width</h4>
+    <FluentTextArea Class="mb-5" @bind-Value="phvalue" Style="width:100%" />
+    <h4>Placeholder</h4>
+    <FluentTextArea Class="mb-5" @bind-Value="phvalue" Placeholder="Please write the essay."/>
+    <h4>Resize - Horizontal</h4>
+    <FluentTextArea Class="mb-5" @bind-Value="phvalue" Resize="TextAreaResize.Horizontal" />
+    <h4>Resize - Vertical</h4>
+    <FluentTextArea Class="mb-5" @bind-Value="phvalue" Resize="TextAreaResize.Vertical"/>
+    <h4>Resize - Both</h4>
+    <FluentTextArea @bind-Value="phvalue" Resize="TextAreaResize.Both"/>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Focus</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <h4>Focus Async</h4>
+        <FluentTextArea @ref="focusTest" @bind-Value="fcvalue" />
+        <FluentButton OnClick="@(() => focusTest?.FocusAsync())">Focus Async</FluentButton>
+    </FluentStack>
+</FluentCard>
+
+@code {
+    string? eval1, eval2;
+
+    string? rcvalue1 = "1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12";
+    string? rcvalue2;
+
+    string? phvalue;
+
+    FluentTextArea focusTest;
+    string? fcvalue;
+}