Textarea with Character Count for Svelte

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 value is bound to state and the count reads its length, so it updates 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.