# TextArea

> A multi-line native form field for free text entry, rendered as a bordered, rounded `<textarea>` that shares Input's border, background, and focus-ring contract.

```ts
import { TextArea } from "@sdxc/ui";
```

Renders a native `<textarea>` host styled as a bordered, rounded field,
colored through the `data-color` attribute contract — the same visual
language as Input, rendering only the field itself.

## Examples

```tsx
<Label htmlFor="bio">{t("form.bio.label")}</Label>
<TextArea id="bio" name="bio" />
```

```tsx
<TextArea
	aria-label={t("form.comment.label")}
	color="brand"
	placeholder={t("form.comment.placeholder")}
/>
```

```tsx
<TextArea id="notes" aria-describedby="notes-error" aria-invalid="true" />
<FieldError id="notes-error">{t("form.notes.tooLong")}</FieldError>
```

## Props

Takes no props of its own.

## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the focus-visible ring, each mapped to its matching `--ui-*` variables. |