New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Adding Character Limit Hint to TextArea for {{ site.framework }}


Product TextArea for Progress® Telerik® UI for ASP.NET MVC
Version 2023.1.425


How can I add a character limit hint below the TextArea? The hint will show the remaining characters as I type in the TextArea.


Here's an example of how you can add a character counter to a TextArea using jQuery:

  1. Include a <span> element below the TextArea in your markup.
  2. Use jQuery to update the content of the <span> element with the remaining characters count as the user types.
<div style="width: 400px;">
        .Placeholder("Enter your text here.")
        .HtmlAttributes(new { data_required_msg = "Please enter a text.", data_max_msg = "Enter value between 1 and 250" })
    <span class="characters-counter">0/250 characters left.</span>

    $(document).ready(function() {
        $('#textarea').bind('keyup', function() {
            var valueLength = this.value.length;
            var count = 250 - valueLength;

            $(".characters-counter").html(count + "/250 characters left.")

    .characters-counter {
        float: right;

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.


  • Make sure to adjust the MaxLength() option to match your desired character limit.
  • Customize the message displayed in the <span> element and the data_max_msg attribute to fit your needs.

More ASP.NET MVC TextArea Resources

See Also

In this article