Textarea with Character Count for React

When the field has a limit people need to write within: a post, a bio, an SMS, a meta description. Skip it for feedback or long-form fields with no practical limit, where a counter only adds noise.

maxLength is a hard stop: the browser won't take another character, and pasted text is cut at the limit. For a soft limit, leave maxLength off, let people type past it, and mark the field invalid with a FieldError until they edit it down. Use the hard stop when the limit is technical, such as a database column.

It helps. The demo keeps the count muted; add a condition on the length, for example text-destructive once it reaches 90 percent of the limit, so people see the end coming. Keep the number itself, since color alone doesn't reach everyone.

The FieldDescription takes text-end, so the count sits at the end edge under the field, out of the reading path but easy to glance at, as on most social posting forms. text-end is logical, so it moves to the left in a right-to-left layout.

Yes. A count that changes as you type is what makes it useful, and counting a string's length on each change costs nothing. The Textarea is controlled: useState holds the value and an onChange handler updates it, so the count re-renders with each keystroke.

The demo shows used out of the limit, which gives both numbers at once. A remaining count, such as 18 left, puts the emphasis on the end. Either works; use one format across your product.