# Textarea

> A full width multi-line field that resizes vertically and shares the input styles.

Page: https://pico.rusticstack.com/docs/forms/textarea

`textarea` shares the look of the text input. It is a block, full width, and only resizes vertically.

**Example: Textarea**

```html
<textarea name="bio" rows="4" placeholder="Write a short bio" aria-label="Short bio"></textarea>
```

## With a label

**Example: Textarea with label and helper text**

```html
<label>
  Message
  <textarea name="message" rows="4" placeholder="Your message" aria-describedby="message-help"></textarea>
  <small id="message-help">Up to 500 characters.</small>
</label>
```

## Validation

With `aria-invalid`, the valid or invalid icon is drawn at the top right, sized like a single line input, instead of the vertical center used on inputs.

**Example: Valid and invalid**

```html
<textarea name="ok" rows="2" aria-label="Valid" aria-invalid="false">Looks good.</textarea>
<small>Thanks.</small>
<textarea name="bad" rows="2" aria-label="Invalid" aria-invalid="true">x</textarea>
<small>Write at least 20 characters.</small>
```

See [Validation states](/docs/forms/validation) for details.

## Notes

Disabled and read-only work as on [Input](/docs/forms/input). Use `rows` to set the starting height. Customization uses the shared form variables from the [Forms overview](/docs/forms/overview).