# Textarea

**`sonic-textarea`** wraps a native `<textarea>` with a label, a description and Concorde sizes. Native attributes (`rows`, `cols`, `maxlength`, `wrap`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.

## Basic example

<sonic-code>
  <template>
    <sonic-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>
  </template>
</sonic-code>

## Rows and resize

`rows` sets the visible height. With no `resize`, the user can resize vertically only.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-textarea rows="6" label="Six rows"></sonic-textarea>
      <sonic-textarea resize="none" label="Not resizable"></sonic-textarea>
    </div>
  </template>
</sonic-code>

## Size and status

With no `size`, the textarea uses `md`. `status` colors the field; it defaults to `default`.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-textarea rows="1" size="2xs" value="2xs"></sonic-textarea>
      <sonic-textarea rows="1" size="xs" value="xs"></sonic-textarea>
      <sonic-textarea rows="1" size="sm" value="sm"></sonic-textarea>
      <sonic-textarea rows="1" value="default"></sonic-textarea>
      <sonic-textarea rows="1" size="lg" value="lg"></sonic-textarea>
      <sonic-textarea rows="1" size="xl" value="xl"></sonic-textarea>
      <sonic-textarea rows="1" size="2xl" value="2xl"></sonic-textarea>
      <sonic-textarea rows="1" status="success" value="success"></sonic-textarea>
      <sonic-textarea rows="1" status="error" value="error"></sonic-textarea>
      <sonic-textarea rows="1" status="warning" value="warning"></sonic-textarea>
      <sonic-textarea rows="1" status="info" value="info"></sonic-textarea>
    </div>
  </template>
</sonic-code>

## Validation

`required`, `minlength` and `maxlength` are checked by the browser. Feedback styles apply once the field is `touched` (after blur).

<sonic-code>
  <template>
    <sonic-textarea required minlength="10" label="Special assistance request" placeholder="At least 10 characters"></sonic-textarea>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `name` | string | Key in the form store (dot notation allowed) |
| `value` | string | Initial value |
| `formDataProvider` | string | Store id; inherited from the closest ancestor |
| `label` | string (HTML) | Label; or use the `label` slot |
| `description` | string (HTML) | Help text under the field; or use the `description` slot |
| `placeholder` | string | Native placeholder |
| `size` | `2xs` … `2xl` (default `md`) | Typography and padding |
| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
| `rows` · `cols` | number | Native dimensions |
| `minlength` · `maxlength` | number | Native length constraints |
| `wrap` | `soft` · `hard` | Native wrapping |
| `resize` | `vertical` · `horizontal` · `both` · `none` · `block` · `inline` (default `vertical`) | CSS resize handle |
| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
| `autocomplete` · `tabindex` | native | Passed to the inner `<textarea>` |
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |

| Slot | Description |
|------|-------------|
| `label` | Rich label content |
| `description` | Rich help text |