diff --git a/content/forms/number-input.md b/content/forms/number-input.md
new file mode 100644
index 000000000..a05d937f9
--- /dev/null
+++ b/content/forms/number-input.md
@@ -0,0 +1,986 @@
+---
+layout: home
+title: Tailwind CSS Number Input - Flowbite
+description: Use the number input component to set a numeric value inside a form field based on multiple styles, variants, and layouts that can be used in product pages, forms, and more
+group: components
+requires_js: true
+toc: true
+
+previous: Search Input
+previousLink: forms/search-input/
+next: Select
+nextLink: components/select/
+---
+
+The number input component from Flowbite can be used to introduce numeric values inside a form such as for a quantity field, a ZIP code, a phone number, your credit card number, and more. All of the UI components are coded exclusively with Tailwind CSS.
+
+The examples on this page have basic functionality coded with JavaScript and the quantity input has a more advanced ability to increment and decrement the value with the help of the `data-input-counter` attribute from the Flowbite JS API.
+
+## Default number input
+
+Use this component to set a number value inside a form field by applying the `type="number"` attribute.
+
+{{< example id="default-number-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## ZIP code input
+
+Use this example with an icon and helper text to set a ZIP code value inside a form field by also applying the `pattern` attribute to validate the input using a regular expression for a 5 digit number.
+
+{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## Phone number
+
+Use this example to set a phone number inside a form field based on the `type="phone"` attribute and a dropdown menu to select the country code.
+
+{{< example id="phone-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}
+
+{{< /example >}}
+
+## Control buttons
+
+Use this example with control buttons to increment and decrement the value inside the input field.
+
+If you have the [Flowbite JS](https://flowbite.com/docs/getting-started/quickstart/) installed in your project then you can use the `data-input-counter` data attribute to initialize the target input field and then use the following data attributes to target the buttons that will increment and decrement the value of the input field:
+
+- `data-input-counter` - initialize the input field
+- `data-input-counter-increment` - increment the value of the input field
+- `data-input-counter-decrement` - decrement the value of the input field
+
+{{< example id="control-number-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## Control buttons with icon
+
+Use this example to also add an icon inside the input field to improve the user experience.
+
+{{< example id="control-icon-number-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## Counter input
+
+Use this example as an alternative style to the control buttons example above.
+
+{{< example id="control-icon-number-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## Currency input
+
+This component can be used to set a currency value inside a form field when you need to set a price.
+
+{{< example id="control-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" >}}
+
+{{< /example >}}
+
+## Credit card input
+
+Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/).
+
+{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="540" >}}
+
+{{< /example >}}
+
+## Pin code input
+
+Use this example of a pin code input to set a 6 digit code. This can be used when setting up a new account or when making a payment and the code is sent via phone or email.
+
+{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true >}}
+
+
+
+{{< /example >}}
+
+## Number input with slider
+
+This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/plugins/range-slider/).
+
+{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" >}}
+
+
+
+{{< /example >}}
+
+## Convert currency
+
+Use this example of two number input fields and dropdowns to convert currency and even from fiat to crypto.
+
+{{< example id="control-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" >}}
+
+{{< /example >}}
+
+## Advanced control buttons
+
+This example can be used to add multiple number input fields with quantity selectors and control buttons to use for E-commerce UI similar to projects like AirBnb or Booking.
+
+{{< example id="control-icon-number-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## Min and max values
+
+By using the InputCounter object from the Flowbite JS API, you ca set the min and max values of a number input component by using the following data attributes:
+
+- `data-input-counter-min` - set the minimum value of the input
+- `data-input-counter-max` - set the maximum value of the input
+
+These values will be enforced and validated whenever the user clicks on one of the buttons or tries to introduce the value manually.
+
+{{< example id="control-number-min-max-input" github="components/number-input.md" show_dark=true >}}
+
+{{< /example >}}
+
+## JavaScript behaviour
+
+Use the **InputCounter** object from the Flowbite JS API to create a number input component with increment and decrement buttons that can be used to increase or decrease the value of the input.
+
+### Object parameters
+
+Use the object parameters from the InputCounter object to set the target, increment, and decrement elements as well as the options object.
+
+
+
+
+
+
+ Parameter
+
+
+ Type
+
+
+ Required
+
+
+ Description
+
+
+
+
+
+
+ targetEl
+
+
+ Element
+
+
+ Required
+
+
+ Pass the target input field element that will be incremented or decremented based on click event.
+
+
+
+
+ incrementEl
+
+
+ Element
+
+
+ Optional
+
+
+ Pass the increment button element that will increase the value of the target element based on click event.
+
+
+
+
+ decrementEl
+
+
+ Element
+
+
+ Optional
+
+
+ Pass the decrement button element that will decrease the value of the target element based on click event.
+
+
+
+
+ options
+
+
+ Object
+
+
+ Optional
+
+
+ Set these options to set the minimum and maximum value of the input field and the callback functions.
+
+
+
+
+ instanceOptions
+
+
+ Object
+
+
+ Optional
+
+
+ Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
+
+
+
+
+
+
+### Options
+
+Use these optional options for the InputCounter object to set the minimum and maximum values of the input field and also to set callback functions for the increment and decrement events.
+
+
+
+
+
+
+ Option
+
+
+ Type
+
+
+ Description
+
+
+
+
+
+
+ minValue
+
+
+ Integer
+
+
+ Set the minimum value of the input field.
+
+
+
+
+ maxValue
+
+
+ Integer
+
+
+ Set the maximum value of the input field.
+
+
+
+
+ onIncrement
+
+
+ Function
+
+
+ Set a callback function when the item has been incremented.
+
+
+
+
+ onDecrement
+
+
+ Function
+
+
+ Set a callback function when the item has been decremented.
+
+
+
+
+
+
+### Methods
+
+Use the following methods of the InputCounter object to programmatically manipulate the behaviour of the input field.
+
+
+
+
+
+
+ Method
+
+
+ Description
+
+
+
+
+
+
+ getCurrentValue()
+
+
+ Use this method to get the current value of the input field.
+
+
+
+
+ increment()
+
+
+ Use this method on the InputCounter object to increment the value of the input field.
+
+
+
+
+ decrement()
+
+
+ Use this method on the InputCounter object to decrement the value of the input field.
+
+
+
+
+
+
+### Example
+
+Check out the following examples to learn how to create a new InputCounter object and how to set it up with custom options and programmatically use the methods available.
+
+First of all, you need to set the object parameters where the target element is required and the other two are optional.
+
+```javascript
+// set the target element of the input field
+const $targetEl = document.getElementById('counter-input-example');
+
+// optionally set the increment and decrement elements
+const $incrementEl = document.getElementById('increment-button');
+
+const $decrementEl = document.getElementById('decrement-button');
+
+// optional options with default values and callback functions
+const options = {
+ minValue: 0,
+ maxValue: null, // infinite
+ onIncrement: () => {
+ console.log('input field value has been incremented');
+ },
+ onDecrement: () => {
+ console.log('input field value has been decremented');
+ }
+};
+
+const instanceOptions = {
+ id: 'counter-input-example',
+ override: true
+};
+```
+
+Next step is to create a new instance of a InputCounter object using the parameters we have set above.
+
+```javascript
+import { InputCounter } from 'flowbite';
+
+/*
+ * $targetEl: required
+ * $incrementEl: optional
+ * $decrementEl: optional
+ * options: optional
+ */
+const counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);
+```
+
+Now you can programmatically increment or decrement the input field using the methods of the InputCounter object.
+
+```javascript
+// get the current value of the input field
+counterInput.getCurrentValue();
+
+// increment the value of the input field
+counterInput.increment();
+
+// decrement the value of the input field
+counterInput.decrement();
+```
+
+### HTML Markup
+
+Here is an example of the HTML markup that you can use for the JavaScript example above.
+
+```html
+
+```
+
+### TypeScript
+
+If you're using the
}}">TypeScript configuration from Flowbite then you can import the types for the InputCounter object, parameters and its options.
+
+Here's an example that applies the types from Flowbite to the code above:
+
+```javascript
+import { InputCounter } from 'flowbite';
+import type { InputCounterOptions, InputCounterInterface } from 'flowbite';
+import type { InstanceOptions } from 'flowbite';
+
+// set the target element of the input field
+const $targetEl: HTMLInputElement = document.getElementById('counter-input-example') as HTMLInputElement;
+
+// optionally set the increment and decrement elements
+const $incrementEl: HTMLElement = document.getElementById('increment-button');
+
+const $decrementEl: HTMLElement = document.getElementById('decrement-button');
+
+// optional options with default values and callback functions
+const options: InputCounterOptions = {
+ minValue: 0,
+ maxValue: null, // infinite
+ onIncrement: () => {
+ console.log('input field value has been incremented');
+ },
+ onDecrement: () => {
+ console.log('input field value has been decremented');
+ }
+};
+
+// instance options object
+const instanceOptions: InstanceOptions = {
+ id: 'counter-input-example',
+ override: true
+};
+
+/*
+ * $targetEl: required
+ * $incrementEl: optional
+ * $decrementEl: optional
+ * options: optional
+ * instanceOptions: optional
+ */
+const counterInput: InputCounterInterface = new InputCounter(
+ $targetEl,
+ $incrementEl,
+ $decrementEl,
+ options,
+ instanceOptions
+);
+
+// increment the value of the input field
+counterInput.increment();
+
+// decrement the value of the input field
+counterInput.decrement();
+```
diff --git a/content/forms/range.md b/content/forms/range.md
index a5caadf3b..350a76294 100644
--- a/content/forms/range.md
+++ b/content/forms/range.md
@@ -65,4 +65,19 @@ Apply the small, default, and large sizes for the range component by applying th
Large range
-{{< /example >}}
\ No newline at end of file
+{{< /example >}}
+
+## Labels
+
+Use the following example to add labels to each value milestone of the range slider component.
+
+{{< example id="range-labels-example" github="forms/range.md" show_dark=true >}}
+
+ Labels range
+ Min ($100)
+ $500
+ $1000
+ Max ($1500)
+
+{{< /example >}}
diff --git a/content/forms/search-input.md b/content/forms/search-input.md
index d7ea22a73..ef91b0bc0 100644
--- a/content/forms/search-input.md
+++ b/content/forms/search-input.md
@@ -7,8 +7,8 @@ toc: true
previous: File Input
previousLink: forms/file-input/
-next: Select
-nextLink: forms/select/
+next: Number Input
+nextLink: forms/number-input/
---
The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.
@@ -122,7 +122,7 @@ Use this example where you can select a country in which you want to search for
-
+
United States
@@ -130,7 +130,7 @@ Use this example where you can select a country in which you want to search for
-
+
Germany
@@ -138,7 +138,7 @@ Use this example where you can select a country in which you want to search for
-
+
Italy
@@ -146,7 +146,7 @@ Use this example where you can select a country in which you want to search for
-
+
China
diff --git a/content/forms/select.md b/content/forms/select.md
index f2294bea2..0853df3c6 100644
--- a/content/forms/select.md
+++ b/content/forms/select.md
@@ -5,8 +5,8 @@ description: Get started with the select component to allow the user to choose f
group: forms
toc: true
-previous: Search Input
-previousLink: forms/search-input/
+previous: Number Input
+previousLink: forms/number-input/
next: Textarea
nextLink: forms/textarea/
---
diff --git a/content/getting-started/blazor.md b/content/getting-started/blazor.md
index 927f07785..d587c155c 100644
--- a/content/getting-started/blazor.md
+++ b/content/getting-started/blazor.md
@@ -219,7 +219,7 @@ module.exports = {
```bash
-
+