Textarea with Error for React

After people leave the field or try to submit, not on the first keystroke: an error that appears while someone is still typing reads as a scolding. Once it's shown, clear it as soon as the value becomes valid.

It tells screen readers the value is invalid when the field gets focus, and the Textarea's styles read it to turn the border and ring destructive. Base UI's Field passes it only to Base UI controls, and the Textarea is a native textarea, so the demo sets aria-invalid on it too.

Say what's wrong and how to fix it, as Feedback must be at least 10 characters does. Invalid input or Error leaves people guessing.

The error uses the destructive theme color, so change that token to restyle errors everywhere at once. Keep the message text itself, since color alone doesn't reach everyone.

Show the most important one first, such as empty before too short. If several apply at once, list them all inside the FieldError. FieldError also takes errors, a list of objects with a message such as a form library returns, and renders them as a list.

As soon as the value is valid, on the change that fixes it, so people see their fix worked. Keep the invalid state in your form's state and pass it to the Field; the demo shows the invalid state only.