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';insrc/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.