diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index cccc8d1..d5ba887 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -30,6 +30,7 @@
                     <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>
+                <FluentNavLink Href="forminputnumberfield" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">NumberField</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputNumberField.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputNumberField.razor
new file mode 100644
index 0000000..b187d59
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputNumberField.razor
@@ -0,0 +1,52 @@
+@page "/forminputnumberfield"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">NumberField</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentNumberField</code> wrap a web component of number <code>input</code> field.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <p class="mt-2">
+        <FluentNumberField Label="Integer" @bind-Value="exampleInt"/>
+        <br />
+        Example int: @exampleInt
+        <br />
+        Minimum value: @(int.MinValue), Maximum value: @(int.MaxValue)
+    </p>
+    <p class="mt-2">
+        <FluentNumberField Label="NullableInteger" @bind-Value="exampleNullableInt" />
+        <br />
+        Example int: @exampleNullableInt
+        <br />
+        Minimum value: @(int.MinValue), Maximum value: @(int.MaxValue)
+    </p>
+
+    <p class="mt-2">
+        <h4>Same as above but bound to oninput event (Not overflow)</h4>
+        <FluentNumberField Label="Integer" @bind-Value="exampleInt2" 
+                           Appearance="FluentInputAppearance.Filled"
+                           @oninput="@(e => Int32.TryParse(e.Value?.ToString(), out exampleInt2))"/>
+        <br />
+        Example int: @exampleInt2
+    </p>
+    <p class="mt-2">
+        <h4>Same as above but bound to oninput event</h4>
+        <br />
+        <FluentNumberField Label="NullableInteger" @bind-Value="exampleNullableInt2"
+                           Appearance="FluentInputAppearance.Filled"
+                           @oninput="@(e => exampleNullableInt2 = int.TryParse(e.Value?.ToString(), out int tmp) ? (int?)tmp : null)" />
+        <br />
+        Example int: @exampleNullableInt2
+    </p>
+</FluentCard>
+
+@code {
+    int exampleInt { get; set; } = 123;
+    int? exampleNullableInt = null;
+    int exampleInt2 = 345;
+    int? exampleNullableInt2 = null;
+}