Forms

Textarea

The native <textarea> is styled like the input for consistency.

<textarea
  placeholder="Write a professional short bio..."
  aria-label="Professional short bio"
>
</textarea>

Disabled textarea#

<textarea disabled>
  Disabled
</textarea>

Read-only textarea#

<textarea readonly>
  Read-only
</textarea>

Validation states#

Validation states are provided with aria-invalid.

<textarea aria-invalid="false">
  Valid
</textarea>

<textarea aria-invalid="true">
  Invalid
</textarea>

Helper texts, defined with <small> below the textarea, inherit the validation state color.

Looks good!Please provide a valid value!