Simple Textarea for React

No. The placeholder disappears as soon as people type, so they lose track of what the field is for, and it isn't a reliable accessible name. This demo sets aria-label because it has no visible label; in a form, put the Textarea in a Field with a FieldLabel, as the Textarea with Label example does.

Add resize-none to its classes to hide the drag handle, or resize-y to allow height changes only. The Textarea already grows with its content where field-sizing is supported, so many layouts don't need the handle at all.

The Textarea has field-sizing-content and min-h-16: it starts at that minimum and grows with each line of text. In browsers without field-sizing it keeps the minimum height and scrolls. Set a max height such as max-h-40 to stop it growing past a point.

Neither is needed here: the Textarea is uncontrolled and the browser keeps what's typed, which the form submits under its name. Set a default value to prefill it, and bind the value from state only when you react to every change, such as a character count.

Set maxLength and the browser stops input at the limit. Show the count next to the field so the limit isn't a surprise, as the Textarea with Character Count example does, and check the length on the server too.

The Textarea's own background is transparent, with a tint in dark mode. bg-background gives it the page's background color so it stands out from the muted preview behind it. Drop the class on a plain page, or replace it with another theme color.