# Text Area

## Visual Structure

```
ga-text-area [--invalid]
  └── textarea
```

## Elements Hierarchy

### Core Block

- `ga-text-area` - Main container for the text area component

### Mandatory Elements

- `textarea` - The native HTML textarea element

### Modifiers

- `ga-text-area--invalid` - Styles the text area to indicate a validation error

## Examples

### Regular

```html
<textarea class="ga-text-area" rows="5" placeholder="Placeholder"></textarea>
```

### Hover

```html
<textarea class="ga-text-area" rows="5" placeholder="Placeholder"></textarea>
<textarea class="ga-text-area" rows="5" placeholder="Placeholder" readonly="">
Filled</textarea
>
```

### Disabled

```html
<textarea
  class="ga-text-area"
  rows="5"
  placeholder="Placeholder"
  disabled=""
></textarea>
<textarea class="ga-text-area" rows="5" placeholder="Placeholder" disabled="">
Filled</textarea
>
```

### Invalid

```html
<textarea
  class="ga-text-area ga-text-area--invalid"
  rows="5"
  placeholder="Placeholder"
></textarea>
<textarea
  class="ga-text-area ga-text-area--invalid"
  rows="5"
  placeholder="Placeholder"
  readonly=""
>
Filled</textarea
>
```