<textarea>

The <textarea> element is a multi-line plain-text input for free-form entry. Use the rows attribute to control default height. Always pair with a <label> or aria-label to provide an accessible name for screen readers.

Basic Usage

<textarea name="message" placeholder="Enter your message"></textarea>

With Rows

<textarea rows="3" placeholder="Three rows"></textarea>
<textarea rows="6" placeholder="Six rows"></textarea>

With Label

Always pair textareas with a <label> or aria-label so screen readers can identify the field.

<label for="textarea-message">Message</label>
<textarea name="message" placeholder="Type your message" id="textarea-message"></textarea>

With Helper Text

Helper text provides additional context about the textarea, such as instructions or character limits.

Use <small> element associated with a form control via aria-describedby to associate the helper text with the input for screen readers.

<label for="textarea-message">Type your message</label>
<textarea name="message" placeholder="Type your message" id="textarea-message" aria-describedby="textarea-message-helper"></textarea>
<small id="textarea-message-helper">Maximum 200 characters.</small>

Validation States

Just like any form elements, validation states are provided with aria-invalid. See more at [aria-invalid]

Note: The <small> element automatically inherits the validation state colors.

<label for="textarea-first-story">Type your first-story</label>
<textarea name="first-story" aria-invalid="false" placeholder="Type your first-story" id="textarea-first-story" aria-describedby="textarea-first-story-helper"></textarea>
<small id="textarea-first-story-helper">Looks good!</small>

<label for="textarea-second-story">Type your second-story</label>
<textarea name="second-story" aria-invalid="true" placeholder="Type your second-story" id="textarea-second-story" aria-describedby="textarea-second-story-helper"></textarea>
<small id="textarea-second-story-helper">Cannot be bigger than 200 characters.</small>