TextArea Counter Position
Exploring where the character counter can live on the TextArea. All fields below share one value and limit — type in any of them, or use the controls to push over the limit, and compare how each position behaves at once.Controls
Max length
Status message
64/100 charactersBelow · right (current default)
64/100
Description is required before you can publish.
Where TextArea ships today. The native counter sits between the input and the status message — so with a message present the counter and message stack, pushing the message down and adding two lines of chrome below the field.
Below · left
Description is required before you can publish.
64/100
Left-aligns the counter under the field. With a status message the message renders first (attached under the input) and the counter drops below it — three stacked rows below the field.
Top · inline with label
Description64/100
Description is required before you can publish.
Counter rides the label row, top-right. Visible before typing and never competes with the status message below the field — the cleanest pairing with a validation message.
Inside · bottom-right overlay
64/100
Description is required before you can publish.
Overlaid in the input corner (chat/compose pattern). Keeps the counter clear of the status message below, but reserves bottom padding and sits near the resize handle.
Inside · inline with the drag handle
64/100
Description is required before you can publish.
A full-width footer band spans the input’s bottom strip: the counter rides it at the content-text inset (left) with the resize grip at the right end. The opaque band blends with the field surface and masks any text scrolled behind it. Pairs cleanly with the status message below.
Below · split footer (message + counter)
Description is required before you can publish.
64/100Recommended when a field shows both. Message (left) and counter (right) share the footer row; the counter is pinned top-right and the message wraps beneath it as needed — it is never truncated.