Textarea

Default

HTML
<label>
  Tell us your story:
  <textarea placeholder="It was a dark and stormy night..."></textarea>
</label>

Custom rows

HTML
<label>
  Tell us your story:
  <textarea rows="7" placeholder="It was a dark and stormy night..."></textarea>
</label>

Disabled

HTML
<label>
  Tell us your story:
  <textarea disabled placeholder="It was a dark and stormy night..."></textarea>
</label>

Read-only

HTML
<label>
  Tell us your story:
  <textarea readonly placeholder="It was a dark and stormy night...">Read-only value</textarea>
</label>

Hint

Scary stories are often more engaging
HTML
<label>
  Tell us your story:
  <textarea placeholder="It was a dark and stormy night..."></textarea>
</label>
<small>
  Scary stories are often more engaging
</small>

Validation

Looks good!Please provide a valid value!
HTML
<textarea type="text" name="valid" aria-label="Valid" aria-invalid="false" aria-describedby="valid-hint">Valid</textarea>
<small id="valid-hint">
  Looks good!
</small><textarea type="text" name="invalid" aria-label="Invalid" aria-invalid="true" aria-describedby="invalid-hint">Invalid</textarea>
<small id="invalid-hint">
  Please provide a valid value!
</small>