Required Textarea for React

Only when you can't process the form without the value: the message of a contact form, the body of a comment. Every extra required field is a reason to abandon the form, so leave the rest optional.

The asterisk is hidden from screen readers with aria-hidden, because the required attribute already makes them announce the field as required. The asterisk is only there for sighted users scanning the form. The asterisk is a span inside the FieldLabel, and required goes on the Textarea itself.

The required attribute already stops an empty submit with the browser's own message. For your own message, check the value when the form submits, mark the Field invalid and show a FieldError under the Textarea, as the Textarea with Error example does.

Yes: it's a class on the asterisk, so swap text-destructive for another theme color. Red is the convention people recognize, though, and whatever you choose, use the same indicator on every required field of the form.

After, as here. It's the most common convention and keeps the label readable from its first word. Put it in the same place on every field.

Mark whichever is rarer. When most fields are optional, mark the few required ones with an asterisk; when most are required, mark the optional ones instead, as the Textarea with Hint example does. Marking both adds noise.