Textarea with Hint for React

Mark whichever is rarer. A sign-up form is mostly required, so mark its optional fields as here; a profile form is mostly optional, so mark its required ones with an asterisk, as the Required Textarea example does.

The row is flex with justify-between, which puts the hint at the end edge, apart from the label, where it's easy to find but doesn't interrupt it. The end edge is the left in a right-to-left layout. Optional in parentheses after the label works too.

text-muted-foreground and text-sm, as here, so it reads as secondary to the label without disappearing.

Yes. Optional is the most widely understood, but a short phrase that fits your form's tone works. Use the same word on every optional field.

Mark the required ones, since leaving one empty blocks submitting, or say at the top that every field is required unless marked optional. Don't mark both.

Yes. The label and the hint stay on one line at any usual width, and the hint keeps to the end edge as the form narrows.