diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/blur/blur.cs b/ej2-asp-core-mvc/code-snippet/textarea/events/blur/blur.cs
new file mode 100644
index 0000000000..ff9e1f2f0e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/blur/blur.cs
@@ -0,0 +1,4 @@
+public ActionResult Blur()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/blur/razor b/ej2-asp-core-mvc/code-snippet/textarea/events/blur/razor
new file mode 100644
index 0000000000..bb3e87ec2b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/blur/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+@Html.EJS().TextArea("default").Blur("BlurHandler").Render()
+
+<script>
+
+    function BlurHandler(args) {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/blur/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/events/blur/tagHelper
new file mode 100644
index 0000000000..0cc348c6ac
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/blur/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+<ejs-textarea id="default" blur="blurHandler"></ejs-textarea>
+
+<script>
+
+    function blurHandler(args) {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/change/change.cs b/ej2-asp-core-mvc/code-snippet/textarea/events/change/change.cs
new file mode 100644
index 0000000000..eefc32eea9
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/change/change.cs
@@ -0,0 +1,4 @@
+public ActionResult Change()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/change/razor b/ej2-asp-core-mvc/code-snippet/textarea/events/change/razor
new file mode 100644
index 0000000000..e413d16c4f
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/change/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+@Html.EJS().TextArea("default").Change("ChangeHandler").Render()
+
+<script>
+
+    function ChangeHandler(args) {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/change/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/events/change/tagHelper
new file mode 100644
index 0000000000..5a67cd6cb2
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/change/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+<ejs-textarea id="default" change="changeHandler"></ejs-textarea>
+
+<script>
+
+    function changeHandler() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/created/created.cs b/ej2-asp-core-mvc/code-snippet/textarea/events/created/created.cs
new file mode 100644
index 0000000000..757eaf59ee
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/created/created.cs
@@ -0,0 +1,4 @@
+public ActionResult Created()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/created/razor b/ej2-asp-core-mvc/code-snippet/textarea/events/created/razor
new file mode 100644
index 0000000000..52e0240db9
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/created/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+@Html.EJS().TextArea("default").Created("Created").Render()
+
+<script>
+
+    function Created() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/created/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/events/created/tagHelper
new file mode 100644
index 0000000000..956a92e65d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/created/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+<ejs-textarea id="default" created="created"></ejs-textarea>
+
+<script>
+
+    function created() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/destroyed.cs b/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/destroyed.cs
new file mode 100644
index 0000000000..1c842b650a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/destroyed.cs
@@ -0,0 +1,4 @@
+public ActionResult Destroyed()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/razor b/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/razor
new file mode 100644
index 0000000000..dd946da10b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+@Html.EJS().TextArea("default").Destroyed("Destroyed").Render()
+
+<script>
+
+    function Destroyed() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/tagHelper
new file mode 100644
index 0000000000..21d23c172e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/destroyed/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+<ejs-textarea id="default" destroyed="destroyed"></ejs-textarea>
+
+<script>
+
+    function destroyed() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/focus/focus.cs b/ej2-asp-core-mvc/code-snippet/textarea/events/focus/focus.cs
new file mode 100644
index 0000000000..809b57f90f
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/focus/focus.cs
@@ -0,0 +1,4 @@
+public ActionResult Focus()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/focus/razor b/ej2-asp-core-mvc/code-snippet/textarea/events/focus/razor
new file mode 100644
index 0000000000..466df363ed
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/focus/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+@Html.EJS().TextArea("default").Focus("FocusHandler").Render()
+
+<script>
+
+    function FocusHandler(args) {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/focus/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/events/focus/tagHelper
new file mode 100644
index 0000000000..35a68d1ced
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/focus/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+<ejs-textarea id="default" focus="focusHandler"></ejs-textarea>
+
+<script>
+
+    function focusHandler() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/input/input.cs b/ej2-asp-core-mvc/code-snippet/textarea/events/input/input.cs
new file mode 100644
index 0000000000..407b1ed297
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/input/input.cs
@@ -0,0 +1,4 @@
+public ActionResult Input()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/input/razor b/ej2-asp-core-mvc/code-snippet/textarea/events/input/razor
new file mode 100644
index 0000000000..647ec64a86
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/input/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+@Html.EJS().TextArea("default").Input("InputHandler").Render()
+
+<script>
+
+    function InputHandler(args) {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/events/input/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/events/input/tagHelper
new file mode 100644
index 0000000000..b86fa92812
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/events/input/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Inputs
+
+<ejs-textarea id="default" input="inputHandler"></ejs-textarea>
+
+<script>
+
+    function inputHandler() {
+        // Here, you can customize your code.
+    }
+
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/label.cs b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/label.cs
new file mode 100644
index 0000000000..01558dda96
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/label.cs
@@ -0,0 +1,4 @@
+public ActionResult Label()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/razor b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/razor
new file mode 100644
index 0000000000..6dd2627e27
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/razor
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).Render()
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/tagHelper
new file mode 100644
index 0000000000..9bb61291d9
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/label/tagHelper
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" floatLabelType="Auto"></ejs-textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/localization1.cs b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/localization1.cs
new file mode 100644
index 0000000000..a316c3c42e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/localization1.cs
@@ -0,0 +1,4 @@
+public ActionResult Localization1()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/razor b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/razor
new file mode 100644
index 0000000000..48306101f6
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/razor
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("veuillez inscrire vos commentaires").Locale("fr-BE").FloatLabelType(FloatLabelType.Auto).Render()
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/tagHelper
new file mode 100644
index 0000000000..413381469c
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization1/tagHelper
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="veuillez inscrire vos commentaires" locale="fr-BE" floatLabelType="Auto"></ejs-textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/localization2.cs b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/localization2.cs
new file mode 100644
index 0000000000..b0e399acd8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/localization2.cs
@@ -0,0 +1,4 @@
+public ActionResult Localization2()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/razor b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/razor
new file mode 100644
index 0000000000..59aba910fb
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/razor
@@ -0,0 +1,18 @@
+
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Locale("de-DE").FloatLabelType(FloatLabelType.Auto).Render()
+    </div>
+</div>
+
+<script>
+    var L10n = ej.base.L10n;
+    L10n.load({
+        'de-DE': {
+            'textarea': {
+                placeholder: 'Geben Sie Ihre Kommentare ein'
+            }
+        }
+    });
+    loadCultureFiles('de-DE');
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/tagHelper
new file mode 100644
index 0000000000..f7b9f786b1
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/floating-label/localization2/tagHelper
@@ -0,0 +1,17 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" locale="de-DE" floatLabelType="Auto"></ejs-textarea>
+    </div>
+</div>
+
+<script>
+    var L10n = ej.base.L10n;
+    L10n.load({
+        'de-DE': {
+            'textarea': {
+                placeholder: 'Geben Sie Ihre Kommentare ein'
+            }
+        }
+    });
+    loadCultureFiles('de-DE');
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/form-validator.cs b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/form-validator.cs
new file mode 100644
index 0000000000..ceec3779a8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/form-validator.cs
@@ -0,0 +1,4 @@
+public ActionResult FormValidator()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/razor b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/razor
new file mode 100644
index 0000000000..fe25dae044
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/razor
@@ -0,0 +1,56 @@
+<div class="control-section">
+    <div class="control_wrapper" id="control_wrapper">
+        <h3 class="form-title">Feedback</h3>
+        <div class="control_wrapper textarea-form">
+            <form id="form1" method="post">
+                <div class="form-group">
+                    <div class="e-float-input">
+                        <label>Email</label>
+                        <input type="email" id="email" name="email" data-email-message="Please enter valid email address."
+                        data-required-message="Required field" required data-msg-containerid="emailError"/>
+                        <span class="e-float-line"></span>
+                    </div>
+                    <div id="emailError"></div>
+                </div>
+                <div class="form-group">
+                    <div>
+                        <label>Comments</label>
+                        <br/>
+                        <div class="control_wrapper textarea-control-section">
+                            @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).HtmlAttributes(new { @name = "comments", @required = "", @data-msg-containerid="commentError" }).Render()
+                        </div>
+                    </div>
+                    <div id="commentError"></div>
+                </div>
+                <div class="row">
+                    <div style="float: left">
+                        <button class="btn" type="submit">Submit</button>
+                    </div>
+                    <div style="float: left;">
+                        <button class="btn" type="reset">Reset</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <br />
+        <br />
+    </div>
+</div>
+
+<script>
+    // sets required property in the FormValidator rules collection
+    var options = {
+        rules: {
+            'email': { required: [true, '* Please enter valid email'] },
+            comments: { required: [true, '* Please enter your comments'] }
+        },
+    };
+    // defines FormValidator to validate the TextArea
+    var formObject = new ej.inputs.FormValidator('#form1', options);
+
+    // places error label outside the TextArea using the customPlacement event of FormValidator
+
+    formObject.customPlacement = function (element, errorElement) {
+        document.querySelector("#default").parentNode.appendChild(errorElement);
+    };
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/tagHelper
new file mode 100644
index 0000000000..db0a0fe09d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form-validator/tagHelper
@@ -0,0 +1,56 @@
+<div class="control-section">
+    <div class="control_wrapper" id="control_wrapper">
+        <h3 class="form-title">Feedback</h3>
+        <div class="control_wrapper textarea-form">
+            <form id="form1" method="post">
+                <div class="form-group">
+                    <div class="e-float-input">
+                        <label>Email</label>
+                        <input type="email" id="email" name="email" data-email-message="Please enter valid email address."
+                        data-required-message="Required field" required data-msg-containerid="emailError"/>
+                        <span class="e-float-line"></span>
+                    </div>
+                    <div id="emailError"></div>
+                </div>
+                <div class="form-group">
+                    <div>
+                        <label>Comments</label>
+                        <br/>
+                        <div class="control_wrapper TextArea-control-section">
+                            <ejs-textarea id="default" name="comments" data-msg-containerid="commentError" placeholder='Enter your comments' floatLabelType='Auto' required=""></ejs-textarea>
+                        </div>
+                    </div>
+                    <div id="commentError"></div>
+                </div>
+                <div class="row">
+                    <div style="float: left">
+                        <button class="btn" type="submit">Submit</button>
+                    </div>
+                    <div style="float: left;">
+                        <button class="btn" type="reset">Reset</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <br />
+        <br />
+    </div>
+</div>
+
+<script>
+    // sets required property in the FormValidator rules collection
+    var options = {
+        rules: {
+            'email': { required: [true, '* Please enter valid email'] },
+            comments: { required: [true, '* Please enter your comments'] }
+        },
+    };
+    // defines FormValidator to validate the TextArea
+    var formObject = new ej.inputs.FormValidator('#form1', options);
+
+    // places error label outside the TextArea using the customPlacement event of FormValidator
+
+    formObject.customPlacement = function (element, errorElement) {
+        document.querySelector("#default").parentNode.appendChild(errorElement);
+    };
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/form.cs b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/form.cs
new file mode 100644
index 0000000000..5bc2aad571
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/form.cs
@@ -0,0 +1,4 @@
+public ActionResult Form()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/razor b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/razor
new file mode 100644
index 0000000000..cdb27dfafd
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/razor
@@ -0,0 +1,11 @@
+<div class="control-section">
+    <form id="myForm">
+        <span>Please leave your comments</span>
+        <br />
+        <div class="control_wrapper textarea-control-section">
+            @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).HtmlAttributes(new { @name = "comments", @required = "" }).Render()
+        </div>
+        <input id="submit" type="submit" value="Submit">
+        <input id="reset" type="reset" value="Reset">
+    </form>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/tagHelper
new file mode 100644
index 0000000000..5c729c37bd
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/form-support/form/tagHelper
@@ -0,0 +1,11 @@
+<div class="control-section">
+    <form id="myForm">
+        <span>Please leave your comments</span>
+        <br />
+        <div class="control_wrapper TextArea-control-section">
+            <ejs-textarea id='default' name="comments" placeholder='Enter your comments' floatLabelType='Auto' required=""></ejs-textarea>
+        </div>
+        <input id="submit" type="submit" value="Submit">
+        <input id="reset" type="reset" value="Reset">
+    </form>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/maxLength/maxLength.cs b/ej2-asp-core-mvc/code-snippet/textarea/maxLength/maxLength.cs
new file mode 100644
index 0000000000..3c5361a0c8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/maxLength/maxLength.cs
@@ -0,0 +1,4 @@
+public ActionResult MaxLength()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/maxLength/razor b/ej2-asp-core-mvc/code-snippet/textarea/maxLength/razor
new file mode 100644
index 0000000000..23a7273794
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/maxLength/razor
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").maxLength(20).Render()
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/maxLength/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/maxLength/tagHelper
new file mode 100644
index 0000000000..139634a1df
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/maxLength/tagHelper
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" maxLength="20"></ejs-textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/methods1.cs b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/methods1.cs
new file mode 100644
index 0000000000..de4c3cd7f8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/methods1.cs
@@ -0,0 +1,4 @@
+public ActionResult Methods1()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/razor b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/razor
new file mode 100644
index 0000000000..8485157de3
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/razor
@@ -0,0 +1,13 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Render()
+        <button id="button">Focus-in</button>
+    </div>
+</div>
+
+<script>
+    document.getElementById("button").onclick = function() {
+        var textareaObj = document.getElementById('default').ej2_instances[0];
+        textareaObj.focusIn();
+    };
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/tagHelper
new file mode 100644
index 0000000000..0c74b0193b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs1/tagHelper
@@ -0,0 +1,14 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default"></ejs-textarea>
+        <br/>
+        <button id="button">Focus-in</button>
+    </div>
+</div>
+
+<script>
+    document.getElementById("button").onclick = function() {
+        var textareaObj = document.getElementById('default').ej2_instances[0];
+        textareaObj.focusIn();
+    };
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/methods2.cs b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/methods2.cs
new file mode 100644
index 0000000000..561401ee3d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/methods2.cs
@@ -0,0 +1,4 @@
+public ActionResult Methods2()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/razor b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/razor
new file mode 100644
index 0000000000..16fd79e563
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/razor
@@ -0,0 +1,13 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Render()
+        <button id="button">Focus-Out</button>
+    </div>
+</div>
+
+<script>
+    document.getElementById("button").onclick = function() {
+        var textareaObj = document.getElementById('default').ej2_instances[0];
+        textareaObj.focusOut();
+    };
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/tagHelper
new file mode 100644
index 0000000000..7ace834d98
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs2/tagHelper
@@ -0,0 +1,14 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default"></ejs-textarea>
+        <br/>
+        <button id="button">Focus-Out</button>
+    </div>
+</div>
+
+<script>
+    document.getElementById("button").onclick = function() {
+        var textareaObj = document.getElementById('default').ej2_instances[0];
+        textareaObj.focusOut();
+    };
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/methods3.cs b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/methods3.cs
new file mode 100644
index 0000000000..ec14864710
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/methods3.cs
@@ -0,0 +1,4 @@
+public ActionResult Methods3()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/razor b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/razor
new file mode 100644
index 0000000000..62c8c38d11
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/razor
@@ -0,0 +1,13 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Render()
+        <button id="button">Get Persisit-data</button>
+    </div>
+</div>
+
+<script>
+    document.getElementById("button").onclick = function() {
+        var textareaObj = document.getElementById('default').ej2_instances[0];
+        textareaObj.getPersistData();
+    };
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/tagHelper
new file mode 100644
index 0000000000..08b4e9f96e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/methods-cs3/tagHelper
@@ -0,0 +1,14 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default"></ejs-textarea>
+        <br/>
+        <button id="button">Get Persisit-data</button>
+    </div>
+</div>
+
+<script>
+    document.getElementById("button").onclick = function() {
+        var textareaObj = document.getElementById('default').ej2_instances[0];
+        textareaObj.getPersistData();
+    };
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/razor b/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/razor
new file mode 100644
index 0000000000..b64f2efe84
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/razor
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").ResizeMode(ResizeMode.Both).Render()
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/resize.cs b/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/resize.cs
new file mode 100644
index 0000000000..b07a493120
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/resize.cs
@@ -0,0 +1,4 @@
+public ActionResult Resize()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/tagHelper
new file mode 100644
index 0000000000..ef3defa480
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/resize/resize/tagHelper
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" resizeMode="Both"></ejs-textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/resize/width/razor b/ej2-asp-core-mvc/code-snippet/textarea/resize/width/razor
new file mode 100644
index 0000000000..895fbb68b8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/resize/width/razor
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").ResizeMode(ResizeMode.Both).Width(500).Render()
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/resize/width/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/resize/width/tagHelper
new file mode 100644
index 0000000000..6bae3fb63a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/resize/width/tagHelper
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" resizeMode="Both" width="500"></ejs-textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/resize/width/width.cs b/ej2-asp-core-mvc/code-snippet/textarea/resize/width/width.cs
new file mode 100644
index 0000000000..4fd3024e44
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/resize/width/width.cs
@@ -0,0 +1,4 @@
+public ActionResult Width()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/razor b/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/razor
new file mode 100644
index 0000000000..34b0bb655a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/razor
@@ -0,0 +1,10 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        <div>
+            @Html.EJS().TextArea("default1").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).rowsCount(3).columnsCount(35).Render()
+        </div>
+        <div>
+            @Html.EJS().TextArea("default2").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).rowsCount(5).columnsCount(40).Render()
+        </div>
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/rows-cols.cs b/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/rows-cols.cs
new file mode 100644
index 0000000000..e1b88969ab
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/rows-cols.cs
@@ -0,0 +1,4 @@
+public ActionResult RowsCols()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/tagHelper
new file mode 100644
index 0000000000..7a88ca2053
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/rows-cols/tagHelper
@@ -0,0 +1,10 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <div>
+            <ejs-textarea id="default1" placeholder="Enter your comments" floatLabelType="Auto" rowsCount="3" columnsCount="35"></ejs-textarea>
+        </div>
+        <div>
+            <ejs-textarea id="default2" placeholder="Enter your comments" floatLabelType="Auto" rowsCount="5" columnsCount="40"></ejs-textarea>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/asterisk.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/asterisk.cs
new file mode 100644
index 0000000000..6a03951c3a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/asterisk.cs
@@ -0,0 +1,4 @@
+public ActionResult Asterisk()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/razor
new file mode 100644
index 0000000000..e42d93d763
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/razor
@@ -0,0 +1,13 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).Render()
+    </div>
+</div>
+
+<style>
+    /* To add asterick to float label in textarea */ 
+    .e-float-input.e-control-wrapper .e-float-text::after {
+        content: '*';
+        color: red;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/tagHelper
new file mode 100644
index 0000000000..577c6e7cb5
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/asterisk/tagHelper
@@ -0,0 +1,13 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" floatLabelType="Auto"></ejs-textarea>
+    </div>
+</div>
+
+<style>
+    /* To add asterick to float label in textarea */ 
+    .e-float-input.e-control-wrapper .e-float-text::after {
+        content: '*';
+        color: red;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/cssClass.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/cssClass.cs
new file mode 100644
index 0000000000..f1bb841424
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/cssClass.cs
@@ -0,0 +1,4 @@
+public ActionResult CssClass()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/razor
new file mode 100644
index 0000000000..d5a2fe8df9
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/razor
@@ -0,0 +1,15 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).CssClass("custom-textarea").Render()
+    </div>
+</div>
+
+<style>
+    /* Custom CSS class for TextArea styling */
+    #input-container .custom-textarea {
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        padding: 10px;
+        background-color: antiquewhite;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/tagHelper
new file mode 100644
index 0000000000..d99470a9c1
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/cssClass/tagHelper
@@ -0,0 +1,15 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" floatLabelType="Auto" cssClass="custom-textarea"></ejs-textarea>
+    </div>
+</div>
+
+<style>
+    /* Custom CSS class for TextArea styling */
+    #input-container .custom-textarea {
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        padding: 10px;
+        background-color: antiquewhite;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/filled-outlined.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/filled-outlined.cs
new file mode 100644
index 0000000000..9b0ea7fa13
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/filled-outlined.cs
@@ -0,0 +1,4 @@
+public ActionResult FilledOutlined()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/razor
new file mode 100644
index 0000000000..756b98c85b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/razor
@@ -0,0 +1,12 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        <label className="custom-input-label"> Filled TextArea </label>
+        <div id='container'>
+            @Html.EJS().TextArea("filled").Placeholder("Filled").FloatLabelType(FloatLabelType.Auto).CssClass("e-filled").Render()
+        </div>
+        <label className="custom-input-label"> Outlined TextArea </label>
+        <div id='container1'>
+            @Html.EJS().TextArea("outlined").Placeholder("Outlined").FloatLabelType(FloatLabelType.Auto).CssClass("e-outline").Render()
+        </div>
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/tagHelper
new file mode 100644
index 0000000000..1866e54bd5
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/filled-outlined/tagHelper
@@ -0,0 +1,12 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <label className="custom-input-label"> Filled TextArea </label>
+        <div id='container'>
+            <ejs-textarea id='filled' placeholder="Filled" floatLabelType="Auto" cssClass="e-filled"></ejs-textarea>
+        </div>
+        <label className="custom-input-label"> Outlined TextArea </label>
+        <div id='container1'>
+            <ejs-textarea id='outlined' placeholder="Outlined" floatLabelType="Auto" cssClass="e-outline"></ejs-textarea>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/floatLabel-color.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/floatLabel-color.cs
new file mode 100644
index 0000000000..431eb41299
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/floatLabel-color.cs
@@ -0,0 +1,4 @@
+public ActionResult FloatLabelColor()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/razor
new file mode 100644
index 0000000000..6e2b2dc7fa
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/razor
@@ -0,0 +1,37 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        <div>
+            @Html.EJS().TextArea("default1").Placeholder("Success").FloatLabelType(FloatLabelType.Auto).CssClass("e-success").Render()
+        </div>
+        <div>
+            @Html.EJS().TextArea("default2").Placeholder("Warning").FloatLabelType(FloatLabelType.Auto).CssClass("e-warning").Render()
+        </div>
+    </div>
+</div>
+
+<style>
+    .e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #22b24b;
+    }
+
+    .e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #22b24b;
+    }
+
+    .e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
+    color: #22b24b;
+    }
+
+
+    .e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #ffca1c;
+    }
+
+    .e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #ffca1c;
+    }
+
+    .e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
+    color: #ffca1c;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/tagHelper
new file mode 100644
index 0000000000..b25f49f5d1
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/floatLabel-color/tagHelper
@@ -0,0 +1,37 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <div>
+            <ejs-textarea id="default1" placeholder="Success" floatLabelType="Auto" cssClass="e-success"></ejs-textarea>
+        </div>
+        <div>
+            <ejs-textarea id="default2" placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"></ejs-textarea>
+        </div>
+    </div>
+</div>
+
+<style>
+    .e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #22b24b;
+    }
+
+    .e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #22b24b;
+    }
+
+    .e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
+    color: #22b24b;
+    }
+
+
+    .e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #ffca1c;
+    }
+
+    .e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
+    color: #ffca1c;
+    }
+
+    .e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
+    color: #ffca1c;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/razor
new file mode 100644
index 0000000000..8acd22b4e5
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/razor
@@ -0,0 +1,43 @@
+<div class="control-section">
+    <h4> Small Size </h4>
+
+    <div class="e-input-group e-small">
+        <textarea class="e-input" placeholder="Enter your comments"></textarea>
+    </div>
+
+    <h4> Bigger Size </h4>
+
+    <div class="e-input-group e-bigger">
+        <textarea class="e-input" placeholder="Enter your comments"></textarea>
+    </div>
+</div>
+
+<script>
+    var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group textarea');
+    var focusFn = function (index) {
+        return function () {
+            getParentNode(input[index]).classList.add('e-input-focus');
+        };
+    };
+
+    var blurFn = function (index) {
+        return function () {
+            getParentNode(input[index]).classList.remove('e-input-focus');
+        };
+    };
+
+    for (var index = 0; index < input.length; index++) {
+        //Focus Event binding for textarea component
+        input[index].addEventListener('focus', focusFn(index));
+        //Blur Event binding for textarea component
+        input[index].addEventListener('blur', blurFn(index));
+    }
+
+    function getParentNode(element) {
+        var parentNode = element.parentNode;
+        if (parentNode.classList.contains('e-input-in-wrap')) {
+            return parentNode.parentNode;
+        }
+        return parentNode;
+    }
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/sizing.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/sizing.cs
new file mode 100644
index 0000000000..132e8522e0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/sizing.cs
@@ -0,0 +1,4 @@
+public ActionResult Sizing()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/tagHelper
new file mode 100644
index 0000000000..8acd22b4e5
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/sizing/tagHelper
@@ -0,0 +1,43 @@
+<div class="control-section">
+    <h4> Small Size </h4>
+
+    <div class="e-input-group e-small">
+        <textarea class="e-input" placeholder="Enter your comments"></textarea>
+    </div>
+
+    <h4> Bigger Size </h4>
+
+    <div class="e-input-group e-bigger">
+        <textarea class="e-input" placeholder="Enter your comments"></textarea>
+    </div>
+</div>
+
+<script>
+    var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group textarea');
+    var focusFn = function (index) {
+        return function () {
+            getParentNode(input[index]).classList.add('e-input-focus');
+        };
+    };
+
+    var blurFn = function (index) {
+        return function () {
+            getParentNode(input[index]).classList.remove('e-input-focus');
+        };
+    };
+
+    for (var index = 0; index < input.length; index++) {
+        //Focus Event binding for textarea component
+        input[index].addEventListener('focus', focusFn(index));
+        //Blur Event binding for textarea component
+        input[index].addEventListener('blur', blurFn(index));
+    }
+
+    function getParentNode(element) {
+        var parentNode = element.parentNode;
+        if (parentNode.classList.contains('e-input-in-wrap')) {
+            return parentNode.parentNode;
+        }
+        return parentNode;
+    }
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/razor
new file mode 100644
index 0000000000..071f172119
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/razor
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").CssClass("e-static-clear").ShowClearButton(true).Render()
+    </div>
+</div>
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/static-clear.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/static-clear.cs
new file mode 100644
index 0000000000..4c33473d93
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/static-clear.cs
@@ -0,0 +1,4 @@
+public ActionResult StaticClear()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/tagHelper
new file mode 100644
index 0000000000..37c357d471
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/static-clear/tagHelper
@@ -0,0 +1,5 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" cssClass="e-static-clear" showClearButton="true"></ejs-textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/razor b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/razor
new file mode 100644
index 0000000000..1650775348
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/razor
@@ -0,0 +1,21 @@
+<div class="control-section">
+    <div class="control_wrapper textarea-control-section">
+        @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).Render()
+    </div>
+</div>
+
+<style>
+    /* To change the background-color and text-color for textarea */ 
+    .e-input-group,
+    .e-float-input,
+    .e-float-input.e-input-group { /* csslint allow: adjoining-classes */
+        background : lightgray;
+        color: green;
+    }
+
+    /* To change the border-color of the textarea */ 
+    .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+    .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { /* csslint allow: adjoining-classes */
+        border-color: #0800ff;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/tagHelper
new file mode 100644
index 0000000000..82d00b8756
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/tagHelper
@@ -0,0 +1,21 @@
+<div class="control-section">
+    <div class="control_wrapper TextArea-control-section">
+        <ejs-textarea id="default" placeholder="Enter your comments" floatLabelType="Auto"></ejs-textarea>
+    </div>
+</div>
+
+<style>
+    /* To change the background-color and text-color for textarea */ 
+    .e-input-group,
+    .e-float-input,
+    .e-float-input.e-input-group { /* csslint allow: adjoining-classes */
+        background : lightgray;
+        color: green;
+    }
+
+    /* To change the border-color of the textarea */ 
+    .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+    .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { /* csslint allow: adjoining-classes */
+        border-color: #0800ff;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/textarea-color.cs b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/textarea-color.cs
new file mode 100644
index 0000000000..32599987f8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/textarea/style-appearance/textarea-color/textarea-color.cs
@@ -0,0 +1,4 @@
+public ActionResult TextAreaColor()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/textarea/events.md b/ej2-asp-core-mvc/textarea/events.md
new file mode 100644
index 0000000000..f90a986434
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/events.md
@@ -0,0 +1,180 @@
+---
+layout: post
+title: Events in ##Platform_Name## TextArea control | Syncfusion
+description: Handling events triggered by user interactions or changes in the ##Platform_Name## TextArea control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Events 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Events in ##Platform_Name## TextArea control
+
+This section describes the TextArea events that will be triggered when appropriate actions are performed. The following events are available in the TextArea control.
+
+## Created
+
+The TextArea control triggers the [Created](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Created) event when the TextArea component is created. This event provides users with an opportunity to perform actions immediately after the TextArea has been created and initialized.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/events/created/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/events/created/created.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/created/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/created/created.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Input
+
+The TextArea control triggers the [Input](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Input) each time when the value of TextArea has changed. This event provides users with an opportunity to perform actions in response to real-time changes in the TextArea's content.
+The [InputEventArgs](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextBox.html#Syncfusion_EJ2_Inputs_TextBox_InputEventArgs/) passed as an event argument provides the details about the input event in the TextArea.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/events/input/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/events/input/input.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/input/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/input/input.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Change
+
+The TextArea control triggers the [Change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Change) event when the content of TextArea has changed and gets focus-out. This event provides users with an opportunity to execute specific actions in response to changes made by the user.
+The [ChangedEventArgs](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextBox.html#Syncfusion_EJ2_Inputs_TextBox_ChangedEventArgs/) passed as an event argument provides the details about the changes in the TextArea's value.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/events/change/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/events/change/change.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/change/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/change/change.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Focus 
+
+The TextArea control triggers the [Focus](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Focus ) when the TextArea gains focus. This event allows developers to execute specific actions when the user interacts with the TextArea by focusing on it.
+The [FocusInEventArgs](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextBox.html#Syncfusion_EJ2_Inputs_TextBox_FocusInEventArgs/) passed as an argument provides details about the focus event in the TextArea.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/events/focus/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/events/focus/focus.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/focus/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/focus/focus.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Blur 
+
+The TextArea control triggers the [Blur](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Blur) when the TextArea loses focus. This event allows users to execute specific actions when the user interacts with the TextArea by moving focus away from it.
+The [FocusOutEventArgs](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextBox.html#Syncfusion_EJ2_Inputs_TextBox_FocusOutEventArgs/) passed as an argument provides details about the blur event in the TextArea.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/events/blur/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/events/blur/blur.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/blur/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/blur/blur.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Destroyed 
+
+The TextArea control triggers the [Destroyed](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Destroyed) when the TextArea component is destroyed.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/events/destroyed/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/events/destroyed/destroyed.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/destroyed/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/destroyed/destroyed.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/ej2-asp-core-mvc/textarea/floating-label.md b/ej2-asp-core-mvc/textarea/floating-label.md
new file mode 100644
index 0000000000..5e60460ace
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/floating-label.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: Floating Label with ##Platform_Name## Textarea control | Syncfusion
+description: Checkout and learn about Floating Label with ##Platform_Name## Textarea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Floating Label
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Floating Label in ##Platform_Name## TextArea control
+
+The floating label functionality in the TextArea control allows the placeholder text to float above the TextArea while the user interacts with it, providing a more intuitive user experience. This feature can be achieved using the [FloatLabelType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_FloatLabelType) API, which offers various options for defining the floating behavior:
+
+| Type  | Description |
+| -- | -- |
+| Auto  | The label floats above the TextArea when it receives focus or input, returning to its initial position when the TextArea loses focus and contains no value. |
+| Always | The label always remains floating above the TextArea, regardless of user interaction. |
+| Never | The label never floats; it remains in its default position within the TextArea. |
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/floating-label/label/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/floating-label/label/label.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/floating-label/label/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/floating-label/label/label.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-float-label.png)
+
+## Placeholder with localization
+
+Localization library allows to localize the placeholder text of the TextArea to different cultures using the `Locale` property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/floating-label/localization1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/floating-label/localization1/localization1.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/floating-label/localization1/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/floating-label/localization1/localization1.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-localization1.png)
+
+To load translation object in an application use `load` function of `L10n` class.
+In the below sample, `German` culture is loaded to the TextArea placeholder text.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/floating-label/localization2/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/floating-label/localization2/localization2.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/floating-label/localization2/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/floating-label/localization2/localization2.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/ej2-asp-core-mvc/textarea/form-support.md b/ej2-asp-core-mvc/textarea/form-support.md
new file mode 100644
index 0000000000..6bd8b851ea
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/form-support.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Form Support with ##Platform_Name## Textarea control | Syncfusion
+description: Checkout and learn about Form support of the ##Platform_Name## Textarea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Form Support
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Support in ##Platform_Name## TextArea control
+
+The TextArea control seamlessly integrates with HTML forms, enabling efficient submission of longer text data. By including TextArea inputs within HTML forms, users can conveniently input multiline text content and submit it as part of form submissions.
+
+This integration enhances the usability of forms, allowing users to provide detailed feedback, enter lengthy descriptions, or input other multiline text data seamlessly.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/form-support/form/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/form-support/form/form.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/form-support/form/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/form-support/form/form.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-form.png)
+
+## Integration of ##Platform_Name## TextArea control with FormValidator component
+
+TextArea control seamlessly integrates with the `FormValidator` component, allowing users to incorporate textarea inputs into form validation processes efficiently.
+
+By integrating TextArea controls with the `FormValidator` component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/form-support/form-validator/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/form-support/form-validator/form-validator.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/form-support/form-validator/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/form-support/form-validator/form-validator.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-asterisk.png b/ej2-asp-core-mvc/textarea/images/textarea-asterisk.png
new file mode 100644
index 0000000000..a15688ac06
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-asterisk.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-color.png b/ej2-asp-core-mvc/textarea/images/textarea-color.png
new file mode 100644
index 0000000000..d87b63fe01
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-color.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-filledOutlined.png b/ej2-asp-core-mvc/textarea/images/textarea-filledOutlined.png
new file mode 100644
index 0000000000..4525e1f6bd
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-filledOutlined.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-float-label.png b/ej2-asp-core-mvc/textarea/images/textarea-float-label.png
new file mode 100644
index 0000000000..a214b1bafd
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-float-label.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-floatLabel-color.png b/ej2-asp-core-mvc/textarea/images/textarea-floatLabel-color.png
new file mode 100644
index 0000000000..ad7a5468b5
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-floatLabel-color.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-form.png b/ej2-asp-core-mvc/textarea/images/textarea-form.png
new file mode 100644
index 0000000000..93da994b98
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-form.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-localization1.png b/ej2-asp-core-mvc/textarea/images/textarea-localization1.png
new file mode 100644
index 0000000000..6a004361b0
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-localization1.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-maxLength.png b/ej2-asp-core-mvc/textarea/images/textarea-maxLength.png
new file mode 100644
index 0000000000..b72e90fbcf
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-maxLength.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-rowscols.png b/ej2-asp-core-mvc/textarea/images/textarea-rowscols.png
new file mode 100644
index 0000000000..daee1b5030
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-rowscols.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-sizing.png b/ej2-asp-core-mvc/textarea/images/textarea-sizing.png
new file mode 100644
index 0000000000..345373e897
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-sizing.png differ
diff --git a/ej2-asp-core-mvc/textarea/images/textarea-static-clear.png b/ej2-asp-core-mvc/textarea/images/textarea-static-clear.png
new file mode 100644
index 0000000000..7dea3c735c
Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-static-clear.png differ
diff --git a/ej2-asp-core-mvc/textarea/max-length.md b/ej2-asp-core-mvc/textarea/max-length.md
new file mode 100644
index 0000000000..e2ba754821
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/max-length.md
@@ -0,0 +1,46 @@
+---
+layout: post
+title: Maximum Length with ##Platform_Name## Textarea control | Syncfusion
+description: Limiting the maximum number of characters in the ##Platform_Name## Textarea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Maximum Length
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Maximum Length in ##Platform_Name## TextArea control
+
+You can enforce a maximum length limit for the text input in the TextArea using the [MaxLength](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_MaxLength) property. This property allows to define the maximum number of characters that users can input into the TextArea.
+
+
+* By setting the `MaxLength` property, you can control the length of text input, preventing users from exceeding a specified character limit.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/maxLength/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/maxLength/maxLength.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/maxLength/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/maxLength/maxLength.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-maxLength.png)
+
+When the user reaches the specified limit, the TextArea prevents further input, ensuring compliance with the defined character limit. This feature helps maintain data integrity and provides users with clear feedback on the allowed input length.
diff --git a/ej2-asp-core-mvc/textarea/methods.md b/ej2-asp-core-mvc/textarea/methods.md
new file mode 100644
index 0000000000..fba203efe8
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/methods.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: Methods in ##Platform_Name## TextArea control | Syncfusion
+description: Handling methods in the ##Platform_Name## TextArea control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Methods 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Methods in ##Platform_Name## TextArea control
+
+This section outlines the methods available for interacting with the TextArea control.
+
+## focusIn
+
+The [focusIn](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_focusIn) method in the TextArea, is used to set focus to the textarea element, enabling user interaction.
+
+By calling the `focusIn` method, you can programmatically set focus to the TextArea control, allowing users to interact with it via keyboard input or other means.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/textarea/methods-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/textarea/methods-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/textarea/methods-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/textarea/methods-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/textarea/methods-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+          
+{% previewsample "page.domainurl/code-snippet/textarea/methods-cs1" %}
+{% endif %}
+
+## focusOut 
+
+The [focusOut](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_focusOut) method in the TextArea control is used to remove focus from the textarea element, ending user interaction.
+This method is beneficial for scenarios where user need to programmatically remove focus from the TextArea control, such as after completing a specific task or when navigating to another element in the application.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/textarea/methods-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/textarea/methods-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/textarea/methods-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/textarea/methods-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/textarea/methods-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+          
+{% previewsample "page.domainurl/code-snippet/textarea/methods-cs2" %}
+{% endif %}
+
+## getPersistData 
+
+The [getPersistData](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_getPersistData) method in the TextArea control retrieves the properties that need to be maintained in the persisted state.
+This method returns an object containing the properties to be persisted, which can include various configuration options and state information of the TextArea control. 
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/textarea/methods-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/textarea/methods-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/textarea/methods-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/textarea/methods-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
diff --git a/ej2-asp-core-mvc/textarea/resize.md b/ej2-asp-core-mvc/textarea/resize.md
new file mode 100644
index 0000000000..d36780b09b
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/resize.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: Resize with ##Platform_Name## Textarea control | Syncfusion
+description: Checkout and learn about Resize with ##Platform_Name## Textarea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Resize
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Resize in ##Platform_Name## TextArea control
+
+The TextArea allows users to input and edit large amounts of text. Resizing this control effectively can enhance the user experience and accommodate varying content needs. This resizing behavior can be enabled and configured using the [ResizeMode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_ResizeMode) API, which offers several options for resizing the TextArea:
+
+| Type  | Description |
+| -- | -- |
+| Vertical  | Allows users to adjust the height of the TextArea vertically. It is suitable when users want to resize the TextArea only along the vertical axis, accommodating varying amounts of text input. |
+| Horizontal | Users can adjust the width of the TextArea horizontally. This option is helpful for accommodating longer lines of text without altering the height of the control. |
+| Both | Allows users to adjust both the height and width of the TextArea, offering maximum flexibility in resizing. It is ideal for situations where users need precise control over the dimensions of the TextArea. |
+| None | Disables the resizing in the TextArea. This option is ideal for situations where maintaining a consistent layout is critical, and resizing by users is unnecessary. |
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/resize/resize/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/resize/resize/resize.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/resize/resize/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/resize/resize/resize.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Width of ##Platform_Name## TextArea control
+
+You can easily customize the width of the TextArea using the [Width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Width) property. This property allows precise adjustment of the TextArea's width according to the specific layout requirements of the application.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/resize/width/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/resize/width/width.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/resize/width/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/resize/width/width.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/ej2-asp-core-mvc/textarea/rows-columns.md b/ej2-asp-core-mvc/textarea/rows-columns.md
new file mode 100644
index 0000000000..ad872fb4cf
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/rows-columns.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: Rows and Columns count in ##Platform_Name## Textarea control | Syncfusion
+description: Adjusting the size of the ##Platform_Name## Textarea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Rows and Columns Count
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rows and Columns in ##Platform_Name## TextArea control
+
+Two essential attributes, `rows` and `columns`, play a pivotal role in customizing the TextArea's appearance and layout.
+The `rows`attribute determines the initial visible number of lines within the TextArea, controlling its vertical size. Conversely, the `columns` attribute specifies the visible width of the TextArea in characters per line, determining its initial width.
+
+
+* You can customize the TextArea control by setting the number of rows using the [RowsCount](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_RowsCount) property and the number of columns using the [ColumnsCount](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_ColumnsCount) property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/rows-cols/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/rows-cols/rows-cols.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/rows-cols/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/rows-cols/rows-cols.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-rowscols.png)
diff --git a/ej2-asp-core-mvc/textarea/style-appearance.md b/ej2-asp-core-mvc/textarea/style-appearance.md
new file mode 100644
index 0000000000..c994f2e288
--- /dev/null
+++ b/ej2-asp-core-mvc/textarea/style-appearance.md
@@ -0,0 +1,314 @@
+---
+layout: post
+title: Style and appearance in ##Platform_Name## TextArea control | Syncfusion
+description: Learn here all about Style and appearance in Syncfusion ##Platform_Name## TextArea control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Style and Appearance 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Sizing in ##Platform_Name## TextArea control
+
+you can adjust the size of the TextArea by applying specific classes:
+
+| Property  | Description |
+| -- | -- |
+| Small  | Add the `e-small` class to the input element or its container to render a smaller-sized TextArea. |
+| Bigger | Add the `e-bigger` class to the input element or its container to render a larger-sized TextArea. |
+
+By applying these classes, users can easily customize the appearance of the TextArea to better fit their application's design requirements.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/sizing/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/sizing/sizing.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/sizing/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/sizing/sizing.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-sizing.png)
+
+## Filled and Outline mode
+
+The Filled and Outline modes can be enabled in the TextArea component by adding the `e-outline` or `e-filled` class to the [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_CssClass) API.
+By adding these classes, users can choose between a filled or outline appearance for the TextArea component, aligning with the design aesthetics of their application.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/filled-outlined/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/filled-outlined/filled-outlined.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/filled-outlined/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/filled-outlined/filled-outlined.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-filledOutlined.png)
+
+>Note: Filled and Outline theme customization are available only with Material themes.
+
+## Custom styling with cssClass API in TextArea
+
+The `CssClass` Api provides a powerful way to apply custom styling to the TextArea component, allowing users to customize its appearance and layout according to their design requirements.
+
+By utilizing the `CssClass` API, users can apply custom CSS classes to the TextArea component's container, enabling control over its styling properties such as color, padding, margins, borders, and more.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/cssClass/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/cssClass/cssClass.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/cssClass/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/cssClass/cssClass.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## Setting the disabled state in TextArea
+
+To disable the TextArea, you can utilize the [Enabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Enabled) property. When set to `false`, the TextArea becomes disabled, preventing user interaction.
+
+{% if page.publishingplatform == "aspnet-core" %}
+```html
+<ejs-textarea id="default" enabled=false></ejs-daterangepicker>
+```
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+```html
+@Html.EJS().TextArea("default").Enabled(false).Render()
+```
+{% endif %}
+
+## Set the readonly TextArea
+
+To make the TextArea read-only , you can use the [Readonly](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Readonly) property. When set to `true`, it prevents users from editing the content of the TextArea.
+
+{% if page.publishingplatform == "aspnet-core" %}
+```html
+<ejs-textarea id="default" value="Readonly" readonly=true></ejs-daterangepicker>
+```
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+```html
+@Html.EJS().TextArea("default").Readonly(true).Value("Readonly").Render()
+```
+{% endif %}
+
+## Set the rounded corner in TextArea
+
+Render the TextArea with `rounded corner` by adding the `e-corner` class to the input parent element.
+
+>This rounded corner is visible only in box model input component
+
+```html
+
+<div class="e-input-group e-corner">
+    <textarea class="e-input" placeholder="Enter your comments"></textarea>
+</div>
+
+```
+
+## Static Clear Button in TextArea
+
+To display a static clear button in the TextArea component, you can add the `e-static-clear` class to the `CssClass` property. This class ensures that the clear button remains visible at all times, providing users with the ability to easily clear the TextArea content without needing to focus on the control.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/static-clear/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/static-clear/static-clear.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/static-clear/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/static-clear/static-clear.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-static-clear.png)
+
+## Customize the TextArea background color and text color
+
+You can customize the TextArea styles such as background-color, text-color and border-color by overriding its default styles to achieve the desired appearance for the TextArea.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/textarea-color/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/textarea-color/textarea-color.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/textarea-color/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/textarea-color/textarea-color.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-color.png)
+
+## Change the floating label color of the TextArea
+
+You can change the floating label color of the TextArea for both `success` and `warning` validation states by applying the following CSS styles.
+
+```css
+
+    /* For Success state */
+    .e-float-input.e-success label.e-float-text,
+    .e-float-input.e-success input:focus ~ label.e-float-text,
+    .e-float-input.e-success input:valid ~ label.e-float-text {
+      color: #22b24b;
+    }
+
+    /* For Warning state */
+    .e-float-input.e-warning label.e-float-text,
+    .e-float-input.e-warning input:focus ~ label.e-float-text,
+    .e-float-input.e-warning input:valid ~ label.e-float-text {
+      color: #ffca1c;
+    }
+
+```
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/floatLabel-color/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/floatLabel-color/floatLabel-color.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/floatLabel-color/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/floatLabel-color/floatLabel-color.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-floatLabel-color.png)
+
+## Adding mandatory asterisk to placeholder
+
+To add a mandatory asterisk (*) to the placeholder in the TextArea component, you can utilize CSS to append the asterisk after the placeholder text.
+
+```css
+
+/* To add asterick to float label in textarea */ 
+.e-float-input.e-control-wrapper .e-float-text::after {
+  content: '*'; /* Add asterisk after the placeholder */
+  color: red; /* Customize asterisk color */
+}
+
+```
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/asterisk/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/asterisk/asterisk.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/textarea/style-appearance/asterisk/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Clear.cs" %}
+{% include code-snippet/textarea/style-appearance/asterisk/asterisk.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-asterisk.png)
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index 8b8db8492d..1c987ef44f 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -2143,6 +2143,7 @@
 				<li><a href="/ej2-asp-core/ribbon/layouts">Ribbon Layouts</a></li>
 				<li><a href="/ej2-asp-core/ribbon/file-menu">File menu</a></li>
 				<li><a href="/ej2-asp-core/ribbon/backstage">Backstage Menu</a></li>
+				<li><a href="/ej2-asp-core/ribbon/contextual-tabs">Contextual Tabs</a></li>
 				<li><a href="/ej2-asp-core/ribbon/help-pane-template">Help Pane Template</a></li>
 				<li><a href="/ej2-asp-core/ribbon/tooltip">Tooltip</a></li>
 				<li><a href="/ej2-asp-core/ribbon/resizing">Resizing</a></li>
@@ -2624,6 +2625,14 @@
 		<li>TextArea
 			<ul>
 			<li><a href="/ej2-asp-core/textarea/getting-started">Getting Started</a></li>
+			<li><a href="/ej2-asp-core/textarea/floating-label">Floating Label</a></li>
+			<li><a href="/ej2-asp-core/textarea/rows-columns">Rows and Columns Count</a></li>
+			<li><a href="/ej2-asp-core/textarea/resize">Resize</a></li>
+			<li><a href="/ej2-asp-core/textarea/max-length">Maximum Length</a></li>
+			<li><a href="/ej2-asp-core/textarea/form-support">Form Support</a></li>
+			<li><a href="/ej2-asp-core/textarea/style-appearance">Style and Appearance</a></li>
+			<li><a href="/ej2-asp-core/textarea/events">Events</a></li>
+			<li><a href="/ej2-asp-core/textarea/methods">Methods</a></li>
 			<li>
 				<a href="/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html"> API Reference</a>
 			</li>
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index 8449f7ceb0..63b1cd9b40 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -2103,6 +2103,7 @@
 				<li><a href="/ej2-asp-mvc/ribbon/layouts">Ribbon Layouts</a></li>
 				<li><a href="/ej2-asp-mvc/ribbon/file-menu">File menu</a></li>
 				<li><a href="/ej2-asp-mvc/ribbon/backstage">Backstage Menu</a></li>
+				<li><a href="/ej2-asp-mvc/ribbon/contextual-tabs">Contextual Tabs</a></li>
 				<li><a href="/ej2-asp-mvc/ribbon/help-pane-template">Help Pane Template</a></li>
 				<li><a href="/ej2-asp-mvc/ribbon/tooltip">Tooltip</a></li>
 				<li><a href="/ej2-asp-mvc/ribbon/resizing">Resizing</a></li>
@@ -2587,6 +2588,14 @@
 		<li>TextArea
 			<ul>
 			<li><a href="/ej2-asp-mvc/textarea/getting-started">Getting Started</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/floating-label">Floating Label</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/rows-columns">Rows and Columns Count</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/resize">Resize</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/max-length">Maximum Length</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/form-support">Form Support</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/style-appearance">Style and Appearance</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/events">Events</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/methods">Methods</a></li>
 			<li>
 				<a href="/cr/aspnetmvc-js2/Syncfusion.EJ2.Inputs.TextArea.html"> API Reference</a>
 			</li>