# Textarea

Level: atom.

## Purpose and use

Enter multiline free text with optional description and length counter. Use Input for a single-line value. This component owns its editable text internally and emits changes.

## Anatomy and behavior

The textarea has a floating label, optional side icons/clear action and counter. counterNumber defaults to 123 and limits typing/paste even when counter=false. Counter overflow feedback flashes only when the visible counter is enabled. Clear emits empty and restores focus; Escape blurs. readonly is released asynchronously on focus and restored on blur. There is no value input for prefilling text.

## Accessibility and content

labelText names the native textarea; visible description is linked. Warning/error mark invalid; disabled uses native semantics. required only renders a star. The clear label is fixed English. The limit counter is not an aria-live announcement.

## Open Questions

External value initialization, configurable clear label and required semantics need a separate implementation decision. Hidden counter does not disable the length limit.

## Local component contract

This is the current owned contract for `component.textarea`. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.

### Public type values

Shared Input size: `L | M | S`; state: `default | active | disabled`; validation: `default | warning | error`. counterNumber is a number; use a finite non-negative integer. valueChange emits string.

### Classes and selectors

- `WblTextareaComponent` — `wbl-textarea` (src/app/design-system/primitives/textarea/textarea.component.ts).

### Inputs

- `WblTextareaComponent.size = input<WblInputSize>('L')`
- `WblTextareaComponent.state = input<WblInputState>('default')`
- `WblTextareaComponent.validation = input<WblInputValidation>('default')`
- `WblTextareaComponent.showLabel = input(true)`
- `WblTextareaComponent.labelText = input('Label')`
- `WblTextareaComponent.required = input(false)`
- `WblTextareaComponent.showPlaceholder = input(true)`
- `WblTextareaComponent.placeholderText = input('Placeholder')`
- `WblTextareaComponent.leftContent = input(false)`
- `WblTextareaComponent.leftIcon = input(false)`
- `WblTextareaComponent.leftIconName = input<WblIconName>('spark')`
- `WblTextareaComponent.rightContent = input(false)`
- `WblTextareaComponent.rightIcon = input(false)`
- `WblTextareaComponent.rightIconName = input<WblIconName>('spark')`
- `WblTextareaComponent.clear = input(false)`
- `WblTextareaComponent.chevron = input(false)`
- `WblTextareaComponent.showDescription = input(false)`
- `WblTextareaComponent.descriptionText = input('Description')`
- `WblTextareaComponent.counter = input(false)`
- `WblTextareaComponent.counterNumber = input(123)`

### Models

- None.

### Outputs

- `WblTextareaComponent.valueChange = output<string>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Behavior/template: `src/app/design-system/primitives/textarea/textarea.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/textarea/textarea.component.ts`.
- Focused test: `src/app/design-system/primitives/textarea/textarea.component.spec.ts`.
- Public export: `export * from './primitives/textarea/textarea.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/textarea.stories.ts` (`Design System/Primitives/wbl-textarea`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.