Build a Remaining Character Count Component with Alpine.js

Before we begin, let's lay down some basic markup for our character counter.

I'm going to be using x-ref directives to identify each part so that you can keep track of everything easily.

<div>
    <textarea x-ref="content"></textarea>
    <p x-ref="remaining"></p>
</div>

On top of that, we need to ensure Alpine can initialise a new component. Let's add an x-data attribute to the root element, in this case a <div>, as well as a data property to hold the contents of the <textarea>.

<div x-data="{ content: '' }">
    <textarea x-ref="content"></textarea>
    <p x-ref="remaining"></p>
</div>

The new content property hasn't been hooked up to the <textarea> yet. The simplest way to do this would be using x-model, which will add an event listener to the element and update the property with the elements value property.

<div x-data="{ content: '' }">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining"></p>
</div>

With data binding setup, all that's left to do is output the number of remaining characters. To do this, we need to know how many characters the content has and what the limit is.

I like to use data attributes for variable pieces of data, such as the character limit. I'll add a new data-limit attribute to hold this.

<div x-data="{ content: '' }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining"></p>
</div>

The reason I like using data attributes is because if you later decide to move the data object into a function, you can still see the arguments that change the behaviour of the component directly in the markup.

I'm also going to add a new property on our component to hold the limit.

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining"></p>
</div>

If you don't want to use a data attribute for the limit, you could put the value directly in the data object instead.

The $el object being used is a magic variable provided by Alpine and is a reference to the root element (the <div>). Since this is just a regular Element object, we can use the dataset property to get the data-limit.

There are a couple of ways to go about actually outputting the remaining characters. I'll cover both of them here, since you might like one more than the other.

Method One - template literals

Using Alpine's x-text alongside template literals, you can dynamically set the innerText of an element.

Applying this method to the element looks a little something like:

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining" x-text="`You have ${limit - content.length} characters remaining."></p>
</div>

Method Two - dynamic <span>

Compared to the first method, this approach will only update the innerText of a single child element instead of the entire <p> element.

This means that you can render the non-dynamic content on the server, or statically.

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining">
        You have <span x-text="limit - content.length"></span> characters remaining.
    </p>
</div>

Improvements

Preventing flashing content

I personally prefer using server-rendered content to give the <span> some default text. In a Laravel application, I might do something like:

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="{{ $limit }}">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining">
        You have <span x-text="limit - content.length">{{ $limit }}</span> characters remaining.
    </p>
</div>

In this case, the $limit variable is coming from the server and will be rendered as the default value inside of the <span> element. This helps with "flashing" content, since Alpine needs some time to evaluate the x-text directive and set the innerText of the element.

You could also tackle the "flashing" problem using x-cloak, as described in this article.

Using a "computed property"

Alpine doesn't support computed properties in the same sense as Vue, but since the data object is just a regular object literal, you can make use of JavaScript's "getters", as described in this article.

This can hide the calculation logic from the directive itself:

<div x-data="{
    content: '',
    limit: $el.dataset.limit,
    get remaining() {
        return this.limit - this.content.length
    }
}" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining">
        You have <span x-text="remaining"></span> characters remaining.
    </p>
</div>

Sign off

If you would like to see an interactive version of this component, I've uploaded one to CodePen.

If you enjoyed this article or have any feedback, please feel free to let me know on Twitter.

Thanks for reading! 👋