# Textarea

Displays a multiline native `<textarea>` with the shared Angular theme tokens and shadcn-style field composition.

Use Textarea for feedback, notes, comments, support messages, and any form surface that needs multi-line entry while keeping browser-native editing behavior.

## Import

```ts
import { TextareaComponent } from '@edsis/component/textarea';
```

Import the `form`, `label`, or `button` entrypoints separately when the page also needs structured field copy or submit actions.

## Composition

Textarea stays intentionally small because it styles the native control instead of wrapping it in a custom value accessor.

```text
label[Label]
└── textarea[Textarea]
```

For the richer shadcn field pattern, compose it with the existing form primitives.

```text
FormField
├── FormLabel
├── textarea[Textarea][FormControl]
└── FormDescription or FormMessage
```

## Basic Usage

Use a visible label plus the styled native textarea when you only need the base multiline control.

```html
<label Label for="bio">Bio</label>
<textarea id="bio" Textarea rows="4" placeholder="Tell us about yourself"></textarea>
```

When the textarea lives inside `FormField`, add `FormControl` so labels, descriptions, and invalid state stay wired together.

```html
<FormField>
  <FormLabel>Message</FormLabel>
  <textarea Textarea FormControl rows="4" placeholder="Type your message here."></textarea>
  <FormDescription>Enter your message below.</FormDescription>
</FormField>
```

## Common Patterns

### Field Composition

The upstream shadcn `Field`, `FieldLabel`, and `FieldDescription` helpers map to the local `form` entrypoint.

```html
<FormField>
  <FormLabel>Feedback</FormLabel>
  <textarea
    Textarea
    FormControl
    rows="4"
    placeholder="Your feedback helps us improve..."
  ></textarea>
  <FormDescription>Share your thoughts about our service.</FormDescription>
</FormField>
```

### Disabled and Invalid States

Use the native `disabled` attribute for disabled state and `aria-invalid="true"` for validation styling.

```html
<FormField>
  <FormLabel>Message</FormLabel>
  <textarea Textarea FormControl rows="4" disabled></textarea>
  <FormDescription>This field is currently disabled.</FormDescription>
</FormField>

<FormField>
  <FormLabel>Message</FormLabel>
  <textarea Textarea FormControl rows="4" aria-invalid="true"></textarea>
  <FormDescription>Please enter a valid message.</FormDescription>
</FormField>
```

### Submit Row

Pair the textarea with `button[Button]` to create feedback and messaging layouts.

```html
<div class="grid w-full max-w-md gap-2">
  <textarea
    Textarea
    rows="5"
    class="min-h-[140px]"
    placeholder="Type your message here."
  ></textarea>
  <button Button type="button" class="w-fit">Send message</button>
</div>
```

### RTL

Set `dir="rtl"` on a wrapping container or manage direction globally in your layout. The textarea stays native while labels and helper text follow the document direction.

```html
<div dir="rtl" lang="ar" class="max-w-md text-right">
  <FormField>
    <FormLabel>التعليقات</FormLabel>
    <textarea
      Textarea
      FormControl
      rows="4"
      placeholder="تعليقاتك تساعدنا على التحسين..."
    ></textarea>
    <FormDescription>شاركنا أفكارك حول خدمتنا.</FormDescription>
  </FormField>
</div>
```

## API Reference

### `TextareaComponent`

| Input   | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` | `''`    |

### Native Attributes

All standard `<textarea>` attributes such as `rows`, `placeholder`, `disabled`, `required`, `readonly`, `dir`, and `aria-invalid` pass through unchanged.

The component also exposes a `focus()` instance method when accessed through `ViewChild(TextareaComponent)`.

## Styling and Theming

The component uses the shared `border-input`, `ring-ring`, `text-foreground`, `placeholder:text-muted-foreground`, and `aria-[invalid=true]:border-destructive` tokens.

Base styling includes a `min-h-[60px]` guard to avoid collapsed textareas and `resize-y` so users can increase the writing area without breaking width-constrained layouts.

Pass `class` to tune height, spacing, or layout while keeping the base focus, disabled, invalid, and resize treatment.

## Accessibility

- Pair the textarea with a visible label using `label[Label]` or `FormLabel`.
- Use `FormControl` inside `FormField` so helper and error text participate in the same accessible description chain.
- Mark validation failures with `aria-invalid="true"` and provide descriptive helper or error text nearby.
- Keep the native resize handle available so pointer and touch users can increase the input area when needed.

## Keyboard Interactions

- `Tab` and `Shift+Tab` move focus in and out using the normal browser order.
- `Enter` inserts a new line instead of submitting by itself.
- Arrow keys, Home, End, selection, and clipboard shortcuts stay browser-native.

## Angular Notes

- Textarea styles the native `<textarea>`, so it works with both `ngModel` and reactive forms.
- Prefer using `FormControl` when the textarea lives inside `FormField`.
- Let Angular form state drive invalid styling when possible, but `aria-invalid="true"` also works for externally managed validation.

## Source Parity

This Angular implementation follows the shadcn Textarea page closely for the core textarea, disabled and invalid states, button layout, and RTL guidance.

The upstream `Field` helper family intentionally maps to the existing Angular `form` entrypoint instead of adding a separate `field` runtime surface.