Textarea with Label for React

The label's for attribute points at the Textarea's id, which gives the field its accessible name and makes clicking the label focus it. Give the Textarea an id and point the FieldLabel at it with htmlFor, as the demo does.

Above, as here, for most forms: a textarea is tall, and a label above reads naturally and fits any width. Put it beside only in dense settings layouts, as the Textarea with Inline Label example does.

The Field sets it, the same gap as every other field, so forms stay consistent. Change it with a gap-* class on the Field if your form needs more or less.

Set required so the browser and screen readers know, and add an asterisk to the label for sighted users. The Required Textarea example shows both.

No. A placeholder disappears once people type and isn't a reliable accessible name. Use it for an example of what to write, alongside the label.

Set disabled on the Textarea: it dims to half opacity and stops taking input. Dim the label as well, for example with opacity-50, so the whole field reads as unavailable.