Hi there.

Today I want to show you few examples of validating textarea limit. It worth it's own article and I'll do this one day. For now, only you, my dear subscriber, can read this :)

Before we begin

If you want to support me, I offer two things. I can advertise your products or services, or provide a UI/UX review of your app.​

Important: if you want to buy ad slot, tell me in advance what you want to advertise. I don't advertise fishy stuff, only those that is useful for my audience (designers, developers, founders, entrepreneurs)

Now, back to textareas.

Never restrict users from typing as much as they want to

That really hurts usability. For example, two cases

1. Users copy paste text. And it gets cut.
2. Users type text and looking at keyboard, not the screen. And then they realize that they lost their time since the exceeded limit was cut off.

It doesn't mean that your frontend and backend shouldn't validate and restrict text. There are many ways of how to do this.

First option.

Pay attention that I put an icon on purpose

That helps with accessibility since color-blinded people can't distinguish the red color.

Second option.

Same, but we highlight text, instead of changing its color. That's a bit better since the exceeded text stands out more.

Third option.

Instead of showing countre like 276/280, we can show a label.

I would say it works better if it's very important and the limitation is strict. Because you make the rule stand out even more.

Fourth option.

You can put the counter inside the textarea.

Also it's a good practice to highlight it with orange color when users get close to the limit.

But this option has a drawback.

And the drawback is that apps like Grammarly put themselves inside textarea.

They simply may cover part of the limit, and its annoying.

I would prefer to put any indicators out of the actual textarea element. Easier to implement, less edge cases.

Fifth option.

You can add a visual progress bar.

There are many ways how it can be designed, but the main idea that it will be more obvious how much characters left.

I bet most of you know how Twitter/X handles this. I would say it's pretty cool: minimalistic, yet, informative.

That's it.

I'm soooo excited that I'm going to implement all this in my interactive course. It will take thousand of hours to build it, but I think it's SO much better rather than read books or looking at pictures.

I compare it to coffee-making: imagine you read a book about how to make a coffee. Will you be able to touch the cup, milk, feel the temperature and so on? Nope.

Same happens here. It's still useful of course, but touching real interfaces, plus having code implementation at hand is much better.

For now you may check my book, until I build the course