Textarea with Counter Ring Form Block for React

LIMIT is the limit and the ring's maximum. The stages are the three thresholds in stageOf (240, 260 and 280) with a sentence for each in STAGE_LINES, and SHOWN_FROM is how many characters from the end the ring starts to show its number. Each sentence is true for every length within its stage, so the text only changes when you cross a threshold, never as you type inside one.

No. The exact count is the field's description ("212 of 280 characters"), read when the field takes focus, and the foot's polite status changes only when a stage is crossed, so it speaks at most four times however long you type. The ring and the number inside it are hidden from assistive technology: they repeat what the words say. The reason under the field never carries the number, for the same reason.

Typing and pasting are never blocked, so a long paste can be trimmed rather than lost. The ring fills, its arc takes the alert colour and the number goes negative; the field is marked invalid and says to trim the update; Post refuses, names the problem in the foot and puts focus back in the field. The state is carried by words and the sign of the number, never by colour alone.

By code point, with Array.from, so an accented letter or an emoji counts once and a paste with line breaks counts each break. That is not always what your server counts (a flag or a family emoji is several code points, and some APIs count UTF-16 units), so count the same way on both sides and trim the same way before you store.

Nothing is posted. Post puts the update at the top of a list kept in the page's state, which always shows the latest two so the panel never changes height, and the foot says it was posted in this demo. For a real feed, send the trimmed text in the submit handler, add the update from the response (or show the error in the same status line and keep the text), and load the older updates from your own API.

Keep the count outside the form library: it is derived from the one value. With react-hook-form, use Controller for the textarea, read the value with watch or useWatch for the ring, and move the limit into a resolver or schema (max(280) counts UTF-16 units, so match it to lengthOf). With TanStack Form, subscribe to the field's value for the ring and validate it with an onChange validator that returns the reason line.