Disabled Textarea for React

A disabled Textarea is dimmed, can't be focused, is skipped by Tab, and its value is left out when the form submits. A readOnly one looks like any other field, can be focused, lets people select and copy its text, and submits its value. Use disabled when the field doesn't apply yet, and readOnly when the value should be seen and sent but not changed, as in the Read-only Textarea example.

Yes. The Textarea already has disabled:opacity-50 and disabled:cursor-not-allowed, and classes you pass with the disabled: variant add to them, for example disabled:bg-muted. Keep the state clearly different from an editable field, since the styling is the only cue sighted users get.

Bind disabled to a boolean from your component's state, such as a saving flag or a permission check, instead of hard-coding it. The Textarea turns editable again as soon as the value is false.

Explain it, but in visible text such as a FieldDescription under the field. A tooltip on the Textarea itself never opens for keyboard users, because a disabled field can't receive focus, and touch users have no hover to open it.

Yes: the native disabled attribute is announced as dimmed or unavailable. The field still needs an accessible name; this demo has no visible label, so it sets aria-label. Pair a real form's Textarea with a FieldLabel instead.

No. Browsers leave disabled controls out of the form data, so the server never receives the value. If the value must be submitted but not edited, use readOnly, or send it from a hidden input with the same name.