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