Forms

Textarea

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

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

Disabled textarea#

<textarea name="disabled" disabled>
  Disabled
</textarea>

Read-only textarea#

<textarea name="read-only" readonly>
  Read-only
</textarea>

Validation states#

Validation states are provided with aria-invalid.

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

<textarea name="invalid" 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!
<textarea
  name="valid"
  aria-invalid="false"
  aria-describedby="valid-helper"
>
  Valid
</textarea>
<small id="valid-helper">Looks good!</small>

<textarea
  name="invalid"
  aria-invalid="true"
  aria-describedby="invalid-helper"
>
  Invalid
</textarea>
<small id="invalid-helper">
  Please provide a valid value!
</small>

Edit this page on GitHub