diff --git a/docs/components-api/textarea.md b/docs/components-api/textarea.md
index 9c94cec2..bf6a1c01 100644
--- a/docs/components-api/textarea.md
+++ b/docs/components-api/textarea.md
@@ -2,12 +2,41 @@
 
 # ExtraTextarea
 
+> ✅ **Реализован**: `ExtraTextareaComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
 | Свойство         | Описание                                                                | Типизация                  |
 | ---------------- | ----------------------------------------------------------------------- | -------------------------- |
 | `placeholder`    | текст подсказки внутри поля                                             | `string`                   |
 | `label`          | текст названия поля                                                     | `string`                   |
-| `labelPosition`  | положение лейбла                                                        | `left \| top \| float`      |
+| `labelPosition`  | положение лейбла                                                        | `top \| left`               |
+| `floatLabel`     | лейбл-плейсхолдер, всплывающий над полем при фокусе/значении            | `boolean`                   |
 | `clearable`      | отображение иконки для очистки поля                                     | `boolean`                  |
-| `resize`         | разрешить изменение размера поля                                        | `boolean`                  |
+| `resizable`      | разрешить изменение размера поля перетаскиванием (нативный resize-уголок) | `boolean`                 |
 | `caption`        | текст пояснения под полем                                               | `string`                   |
 | `info`           | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string`                   |
+| `size`           | размер поля                                                             | `small \| base \| large \| xlarge` |
+| `fluid`          | растягивает поле на всю ширину контейнера                               | `boolean`                   |
+| `autoResize`     | автоподстройка высоты поля под содержимое при вводе                     | `boolean`                   |
+| `rows`           | стартовая высота поля в строках                                        | `number`                     |
+| `cols`           | ширина поля в символах                                                  | `number \| undefined`       |
+| `autofocus`      | автофокус при монтировании компонента                                  | `boolean`                     |
+
+`labelPosition`/`floatLabel` — раздельные пропы (не тройной enum `left \| top \| float`, как было в
+черновике спеки): `labelPosition` отвечает только за top/left, `floatLabel` — отдельный независимый
+переключатель поверх любого из них (см. `docs/naming-rules.md`, раздел «Позиции»). При
+`floatLabel=true` значение `labelPosition` для позиционирования самого лейбла не используется —
+лейбл всегда всплывает поверх поля.
+
+`resizable` — исправленное по `docs/naming-rules.md` имя (булево «возможность действия» → суффикс
+`*able`, в черновике спеки было `resize`).
+
+`size`/`fluid`/`autoResize`/`rows`/`cols`/`autofocus` — полезные пропы сверх первоначального
+черновика спеки, уже реализованы и добавлены сюда по итогам доработки (см. чеклист в корневом
+`CLAUDE.md`, п.3).
+
+## События
+
+| Событие  | Описание                                              | Типизация                                   |
+| -------- | ------------------------------------------------------ | -------------------------------------------- |
+| `resize` | срабатывает при изменении высоты поля пользователем     | `(event: ExtraTextareaResizeEvent) => void` |
+| `clear`  | срабатывает при нажатии на иконку очистки (`clearable`) | `() => void`                                 |
diff --git a/src/lib/components/textarea/textarea.component.ts b/src/lib/components/textarea/textarea.component.ts
index b1353d39..a8304ce2 100644
--- a/src/lib/components/textarea/textarea.component.ts
+++ b/src/lib/components/textarea/textarea.component.ts
@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -10,18 +11,25 @@ import {
   Output
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { NgClass } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { Textarea } from 'primeng/textarea';
 import { IconField } from 'primeng/iconfield';
 import { InputIcon } from 'primeng/inputicon';
+import { FloatLabel } from 'primeng/floatlabel';
+import { ExtraTooltipDirective } from '@cdek-it/angular-ui-kit/components/tooltip';
 
 export type ExtraTextareaSize = 'small' | 'base' | 'large' | 'xlarge';
+export type ExtraTextareaLabelPosition = 'top' | 'left';
+export type ExtraTextareaResizeEvent = Event | Record<string, unknown>;
+
+let nextInputId = 0;
 
 @Component({
   selector: 'extra-textarea',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Textarea, IconField, InputIcon, NgClass],
+  imports: [Textarea, IconField, InputIcon, FloatLabel, NgClass, NgTemplateOutlet, ExtraTooltipDirective],
+  host: { style: 'display: contents' },
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -30,10 +38,82 @@ export type ExtraTextareaSize = 'small' | 'base' | 'large' | 'xlarge';
     }
   ],
   template: `
-    @if (showClear) {
-      <p-iconfield [ngClass]="{ '!w-full': fluid }">
+    <!-- Без label/caption поле не оборачиваем — сохраняем прежнюю DOM-структуру
+         (важно для p-inputgroup, где textarea обязана быть прямым flex-элементом). -->
+    @if (label || caption) {
+      <div class="extra-textarea" [class.extra-textarea--left]="labelPosition === 'left' && !floatLabel">
+        @if (label && labelPosition === 'left' && !floatLabel) {
+          <ng-container [ngTemplateOutlet]="labelTpl" />
+        }
+        <div class="extra-textarea-body">
+          @if (floatLabel) {
+            <p-floatlabel variant="in">
+              <ng-container [ngTemplateOutlet]="fieldTpl" />
+              @if (label) {
+                <ng-container [ngTemplateOutlet]="labelTpl" />
+              }
+            </p-floatlabel>
+          } @else {
+            @if (label && labelPosition === 'top') {
+              <ng-container [ngTemplateOutlet]="labelTpl" />
+            }
+            <ng-container [ngTemplateOutlet]="fieldTpl" />
+          }
+          @if (caption) {
+            <div class="extra-textarea-caption">{{ caption }}</div>
+          }
+        </div>
+      </div>
+    } @else {
+      <ng-container [ngTemplateOutlet]="fieldTpl" />
+    }
+
+    <ng-template #labelTpl>
+      <label class="extra-textarea-label" [for]="inputId">
+        {{ label }}
+        @if (info) {
+          <i class="extra-textarea-label-icon ti ti-info-circle" [extra-tooltip]="info"></i>
+        }
+      </label>
+    </ng-template>
+
+    <ng-template #fieldTpl>
+      @if (clearable) {
+        <p-iconfield [ngClass]="{ '!w-full': fluid }">
+          <textarea
+            pTextarea
+            [id]="inputId"
+            [ngClass]="sizeClass"
+            [pSize]="primeSize"
+            [disabled]="disabled"
+            [readOnly]="readonly"
+            [invalid]="invalid"
+            [fluid]="fluid"
+            [autoResize]="autoResize"
+            [rows]="rows"
+            [cols]="cols"
+            [style.resize]="resizable ? 'vertical' : 'none'"
+            [placeholder]="placeholder"
+            [autofocus]="autofocus"
+            [value]="modelValue"
+            (input)="onInput($event)"
+            (blur)="onTouched()"
+            (onResize)="onResize.emit($event)"
+          ></textarea>
+          <p-inputicon
+            class="ti ti-x"
+            tabindex="0"
+            [style.visibility]="modelValue ? 'visible' : 'hidden'"
+            [style.pointerEvents]="modelValue ? 'auto' : 'none'"
+            (click)="clearValue()"
+            (keydown.enter)="clearValue()"
+            (keydown.space)="clearValue()"
+          ></p-inputicon>
+        </p-iconfield>
+      } @else {
         <textarea
           pTextarea
+          [id]="inputId"
           [ngClass]="sizeClass"
           [pSize]="primeSize"
           [disabled]="disabled"
@@ -43,41 +123,15 @@ export type ExtraTextareaSize = 'small' | 'base' | 'large' | 'xlarge';
           [autoResize]="autoResize"
           [rows]="rows"
           [cols]="cols"
+          [style.resize]="resizable ? 'vertical' : 'none'"
           [placeholder]="placeholder"
           [value]="modelValue"
           (input)="onInput($event)"
           (blur)="onTouched()"
           (onResize)="onResize.emit($event)"
         ></textarea>
-        <p-inputicon
-          class="ti ti-x"
-          tabindex="0"
-          [style.visibility]="modelValue ? 'visible' : 'hidden'"
-          [style.pointerEvents]="modelValue ? 'auto' : 'none'"
-          (click)="clearValue()"
-          (keydown.enter)="clearValue()"
-          (keydown.space)="clearValue()"
-        ></p-inputicon>
-      </p-iconfield>
-    } @else {
-      <textarea
-        pTextarea
-        [ngClass]="sizeClass"
-        [pSize]="primeSize"
-        [disabled]="disabled"
-        [readOnly]="readonly"
-        [invalid]="invalid"
-        [fluid]="fluid"
-        [autoResize]="autoResize"
-        [rows]="rows"
-        [cols]="cols"
-        [placeholder]="placeholder"
-        [value]="modelValue"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        (onResize)="onResize.emit($event)"
-      ></textarea>
-    }
+      }
+    </ng-template>
   `
 })
 export class ExtraTextareaComponent implements ControlValueAccessor, OnInit {
@@ -89,13 +143,23 @@ export class ExtraTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   @Input() placeholder = '';
+  @Input() label = '';
+  @Input() labelPosition: ExtraTextareaLabelPosition = 'top';
+  @Input({ transform: booleanAttribute }) floatLabel = false;
+  @Input() caption = '';
+  @Input() info = '';
+  @Input({ transform: booleanAttribute }) clearable = false;
+  @Input({ transform: booleanAttribute }) resizable = true;
   @Input() size: ExtraTextareaSize = 'base';
-  @Input() readonly = false;
-  @Input() showClear = false;
-  @Input() fluid = false;
-  @Input() autoResize = false;
+  @Input({ transform: booleanAttribute }) readonly = false;
+  @Input({ transform: booleanAttribute }) fluid = false;
+  @Input({ transform: booleanAttribute }) autoResize = false;
   @Input() rows = 3;
   @Input() cols?: number;
+  @Input({ transform: booleanAttribute }) autofocus = false;
+
+  /** Уникальный id поля для связи label ↔ textarea. */
+  readonly inputId = `extra-textarea-${nextInputId++}`;
 
   disabled = false;
 
@@ -103,7 +167,7 @@ export class ExtraTextareaComponent implements ControlValueAccessor, OnInit {
     return this._ngControl?.invalid ?? false;
   }
 
-  @Output() onResize = new EventEmitter<{ height: string } | {}>();
+  @Output() onResize = new EventEmitter<ExtraTextareaResizeEvent>();
   @Output() onClear = new EventEmitter<void>();
 
   modelValue = '';
diff --git a/src/lib/components/textarea/textarea.figma.md b/src/lib/components/textarea/textarea.figma.md
index 2e04610a..aeb29078 100644
--- a/src/lib/components/textarea/textarea.figma.md
+++ b/src/lib/components/textarea/textarea.figma.md
@@ -10,32 +10,117 @@ figma:
   componentKey: 'a4d238e342705216c67068f12f4b28da12094ab7'
   name: '<Textarea>'
 status: stable
-updated: '2026-06-22'
+updated: '2026-10-03'
 ---
 
 ## Overview
 
-`ExtraTextareaComponent` — атомарное многострочное поле для ввода длинного произвольного текста (комментарий, описание, заметка). Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+`ExtraTextareaComponent` — многострочное поле для ввода длинного произвольного текста (комментарий, описание, заметка). Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки». Сам рисует `label`/`caption`/`info` рядом с собой, по тому же принципу, что `ExtraInputText` (см. `docs/components-api/common-info.md` и чеклист в корневом `CLAUDE.md`, раздел «Label / caption / info») — отдельная обёртка `<extra-form-field>` не нужна.
 
-Компонент соответствует Figma-компоненту `<Textarea>` (nodeId `309:1582`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Поле «голое»: label, подсказка, сообщение об ошибке и счётчик символов навешиваются снаружи — через `<extra-input-group>` или `<extra-form-field>`.
+Компонент соответствует Figma-компоненту `<Textarea>` (nodeId `309:1582`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»).
 
 ## Props mapping
 
 | Свойство | Тип | По умолчанию | Описание |
 |----------|-----|--------------|---------|
-| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `placeholder` |
+| `label` | `string` | `''` | Текст названия поля |
+| `labelPosition` | `'top' \| 'left'` | `'top'` | Положение лейбла — соответствует Figma, но без устаревшего третьего значения `float` (вынесено в `floatLabel`, см. `docs/naming-rules.md`) |
+| `floatLabel` | `boolean` | `false` | Лейбл-плейсхолдер, всплывающий над полем — отдельный переключатель, а не третье значение `labelPosition`; при `true` значение `labelPosition` для позиционирования лейбла не используется |
+| `caption` | `string` | `''` | Пояснение под полем |
+| `info` | `string` | `''` | Текст тултипа иконки `ti-info-circle` рядом с лейблом |
+| `clearable` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear`; имя приведено к `*able`-конвенции (было `showClear`) |
+| `resizable` | `boolean` | `true` | Разрешает нативный resize-уголок (`resize: vertical` / `none`) — отдельная от `autoResize` возможность, чистый CSS-хук без PrimeNG-аналога |
+| `placeholder` | `string` | `''` | Подсказка при пустом поле |
 | `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `small`/`large` маппируются на PrimeNG `pSize`, `xlarge` — на CSS-класс `p-textarea-xlg` |
-| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
-| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` |
 | `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
-| `autoResize` | `boolean` | `false` | Автоподстройка высоты под содержимое — соответствует Figma-свойству `show-resize` |
+| `autoResize` | `boolean` | `false` | Автоподстройка высоты под содержимое при вводе — соответствует Figma-свойству `show-resize`. Независима от `resizable`: можно одновременно разрешить и авто-рост, и ручное перетаскивание |
 | `rows` | `number` | `3` | Стартовая высота поля в строках |
 | `cols` | `number \| undefined` | `undefined` | Ширина поля в символах |
-| `(onResize)` | `EventEmitter<{ height: string } \| {}>` | — | Событие при изменении высоты поля пользователем |
-| `(onClear)` | `EventEmitter<void>` | — | Событие при нажатии на иконку очистки (только при `showClear=true`) |
-| `[(ngModel)]` / `[formControl]` | `string` | `''` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-inputarea` |
+| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента; у `pTextarea` нет своего `autofocus`-инпута (это директива на нативном элементе, а не полноценная обёртка как `RadioButton`/`ToggleButton`) — проп пробрасывается напрямую в нативный HTML-атрибут `<textarea>` |
+| `(onResize)` | `EventEmitter<ExtraTextareaResizeEvent>` | — | Событие при изменении высоты поля пользователем |
+| `(onClear)` | `EventEmitter<void>` | — | Событие при нажатии на иконку очистки (только при `clearable=true`) |
+| `[(ngModel)]` / `[formControl]` | `string` | `''` | Значение поля через ControlValueAccessor |
 
-> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+> `invalid` и `disabled` — не публичные `@Input()`: `invalid` вычисляется из связанного `NgControl`
+> (Figma-состояние `state=danger`), `disabled` — только через `ControlValueAccessor.setDisabledState`
+> (`FormControl.disable()`), см. чеклист в `CLAUDE.md`, п.5.
+
+### ⚠️ CSS для label/caption — зона дизайнера, пока отсутствует
+
+В `tokens/components/textarea.ts` сейчас нет классов `.extra-textarea`/`.extra-textarea-body`/
+`.extra-textarea-label`/`.extra-textarea-caption` — агент их не добавлял (см. «Не трогать» в
+`CLAUDE.md`). Без этого CSS `labelPosition="left"` отрисуется визуально неправильно (div — блочный
+элемент, лейбл встанет над полем, а не рядом) — ровно та же ловушка, что уже описана комментарием в
+`tokens/components/inputtext.ts`. Сниппет для дизайнера, 1:1 адаптированный с уже рабочего
+`inputtext.ts` под имена классов textarea:
+
+```ts
+.extra-textarea {
+  display: flex;
+  flex-direction: column;
+}
+
+.extra-textarea--left {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${dt('dimension.space.200')};
+}
+
+.extra-textarea--left > .extra-textarea-label {
+  padding-block: calc(${dt('textarea.root.paddingY')} + ${dt('textarea.extend.borderWidth')});
+}
+
+.extra-textarea-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${dt('dimension.space.100')};
+}
+
+.extra-textarea-body .p-iconfield:has(.p-textarea-fluid),
+.extra-textarea-body > .p-floatlabel:has(.p-textarea-fluid) {
+  width: 100%;
+}
+
+.extra-textarea--left > .extra-textarea-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.extra-textarea-label {
+  display: inline-flex;
+  align-items: center;
+  gap: ${dt('dimension.space.100')};
+  color: ${dt('color.fg.default')};
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.300')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+  line-height: ${dt('fonts.lineHeight.300')};
+  cursor: pointer;
+}
+
+.extra-textarea-label-icon {
+  color: ${dt('color.fg.subtle')};
+  font-size: ${dt('textarea.extend.iconSize')};
+  cursor: help;
+}
+
+.extra-textarea-caption {
+  color: ${dt('color.fg.subtle')};
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-size: ${dt('fonts.fontSize.200')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+  line-height: ${dt('fonts.lineHeight.250')};
+}
+
+.extra-textarea-body > .p-floatlabel > .extra-textarea-label {
+  cursor: text;
+}
+```
+
+До добавления этого CSS лейбл/caption рендерятся функционально верно (DOM корректный,
+`labelPosition="top"` — единственный реально использовавшийся до этой доработки режим — выглядит
+нормально), но `labelPosition="left"` сломан визуально.
 
 ## Variants
 
@@ -44,50 +129,51 @@ updated: '2026-06-22'
 Figma: `<Textarea>`, state=default, placeholder=true, has-floatlabel=false — nodeId `309:1608`
 
 ```html
-<extra-textarea
-  placeholder="Введите текст..."
-  [(ngModel)]="value"
-  name="comment"
-></extra-textarea>
+<extra-textarea placeholder="Введите текст..." [(ngModel)]="value" name="comment"></extra-textarea>
 ```
 
-### С кнопкой очистки (show-clear)
-
-Figma: `<Textarea>`, state=default, show-clear=true — nodeId `309:1608`
+### С лейблом и пояснением
 
 ```html
 <extra-textarea
-  placeholder="Комментарий..."
-  [showClear]="true"
+  label="Комментарий"
+  caption="Видно только менеджеру"
+  info="Не публикуется на сайте"
   [(ngModel)]="comment"
-  name="comment"
 ></extra-textarea>
+
+<!-- лейбл слева -->
+<extra-textarea label="Комментарий" labelPosition="left" [(ngModel)]="comment"></extra-textarea>
 ```
 
-### Автоподстройка высоты (autoResize)
+### Float label
 
-Figma: `<Textarea>`, show-resize=true — nodeId `309:1608`
+Figma: `<Textarea>`, has-floatlabel=true
 
 ```html
-<extra-textarea
-  placeholder="Описание..."
-  [autoResize]="true"
-  [(ngModel)]="description"
-  name="description"
-></extra-textarea>
+<extra-textarea label="Комментарий" [floatLabel]="true" [(ngModel)]="comment"></extra-textarea>
 ```
 
-### Заданная высота (rows)
+### С кнопкой очистки (clearable)
 
-Figma: `<Textarea>`, state=default, placeholder=true
+Figma: `<Textarea>`, state=default, show-clear=true — nodeId `309:1608`
 
 ```html
-<extra-textarea
-  placeholder="Заметка..."
-  [rows]="6"
-  [(ngModel)]="note"
-  name="note"
-></extra-textarea>
+<extra-textarea placeholder="Комментарий..." [clearable]="true" [(ngModel)]="comment" name="comment"></extra-textarea>
+```
+
+### Без ручного resize (resizable=false)
+
+```html
+<extra-textarea placeholder="Фиксированная высота" [resizable]="false" [rows]="4" [(ngModel)]="value"></extra-textarea>
+```
+
+### Автоподстройка высоты (autoResize)
+
+Figma: `<Textarea>`, show-resize=true — nodeId `309:1608`
+
+```html
+<extra-textarea placeholder="Описание..." [autoResize]="true" [(ngModel)]="description" name="description"></extra-textarea>
 ```
 
 ### Disabled (отключённое поле)
@@ -95,10 +181,7 @@ Figma: `<Textarea>`, state=default, placeholder=true
 Figma: `<Textarea>`, state=disabled — nodeId `309:1583`
 
 ```html
-<extra-textarea
-  placeholder="Недоступно"
-  [formControl]="disabledControl"
-></extra-textarea>
+<extra-textarea placeholder="Недоступно" [formControl]="disabledControl"></extra-textarea>
 ```
 
 ```ts
@@ -110,25 +193,7 @@ disabledControl = new FormControl({ value: '', disabled: true });
 Figma: `<Textarea>`, state=readonly — nodeId `14980:20329`
 
 ```html
-<extra-textarea
-  [readonly]="true"
-  [(ngModel)]="readonlyValue"
-  name="roField"
-></extra-textarea>
-```
-
-### Fluid / Large (на всю ширину, большой размер)
-
-Figma: `<Textarea>`, state=default
-
-```html
-<extra-textarea
-  size="large"
-  [fluid]="true"
-  placeholder="Широкое поле"
-  [(ngModel)]="value"
-  name="wideField"
-></extra-textarea>
+<extra-textarea [readonly]="true" [(ngModel)]="readonlyValue" name="roField"></extra-textarea>
 ```
 
 ### С реактивной формой (formControl + валидация)
@@ -140,36 +205,32 @@ descriptionControl = new FormControl('', [Validators.required, Validators.maxLen
 ```
 
 ```html
-<extra-textarea
-  placeholder="Опишите проблему"
-  [formControl]="descriptionControl"
-></extra-textarea>
+<extra-textarea label="Описание проблемы" [formControl]="descriptionControl"></extra-textarea>
 ```
 
 ## Slots
 
-Нет — поле атомарное. Проекция содержимого не поддерживается. Для добавления prefix/suffix-иконок используйте `<extra-input-group>` — см. [inputgroup.figma.md](../inputgroup/inputgroup.figma.md).
+Не используются. `label`/`caption`/`info` — не слоты, а обычные `@Input()` (см. Props mapping).
 
 ## Related
 
-- [InputText](../inputtext/inputtext.figma.md) — однострочное поле для короткого текста
+- [InputText](../inputtext/inputtext.figma.md) — однострочное поле с тем же паттерном label/caption/info (но пока со старым тройным `labelPosition` — не копировать)
 - [InputGroup](../inputgroup/inputgroup.figma.md) — обёртка с prefix/suffix-слотами
-- [Button](../button/button.figma.md) — кнопки действий рядом с полем
 - [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
 - [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
 
 ## Do / Don't
 
 **Do:**
-- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
-- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
-- Включайте `[autoResize]="true"` при непредсказуемом объёме текста, чтобы поле росло по содержимому.
-- Задавайте `[rows]` для стартовой высоты поля и `[fluid]="true"` в формах на всю ширину.
-- Для сброса поля через иконку × включайте `[showClear]="true"` и подписывайтесь на `(onClear)` при необходимости пост-обработки.
-- Оберните поле в `<extra-form-field>` или `<extra-input-group>` для добавления label, подсказки, ошибки и счётчика символов.
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor`.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()`.
+- Задавайте `label`/`caption`/`info` напрямую на компоненте — отдельная обёртка не нужна.
+- Включайте `[autoResize]="true"` при непредсказуемом объёме текста.
+- Используйте `[resizable]="false"`, когда высота поля должна быть фиксированной (например, внутри плотного layout'а).
+- Для сброса поля через иконку × включайте `[clearable]="true"` и подписывайтесь на `(onClear)` при необходимости пост-обработки.
 
 **Don't:**
-- Не подменяйте `value` через прямой DOM (`document.querySelector('textarea').value = ...`) — теряется `dirty`-state и Angular-реактивность.
-- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
-- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
-- Не используйте `extra-textarea` для короткого однострочного текста — для него предназначен [InputText](../inputtext/inputtext.figma.md).
+- Не подменяйте `value` через прямой DOM — теряется `dirty`-state и Angular-реактивность.
+- Не задавайте `[disabled]="true"` как `@Input` — компонент его не объявляет; передавайте через `FormControl`.
+- Не комбинируйте `labelPosition="left"` с ожиданием, что оно повлияет на `floatLabel=true` — при включённом `floatLabel` лейбл всегда всплывает над полем независимо от `labelPosition`.
+- Не используйте `extra-textarea` для короткого однострочного текста — для него [InputText](../inputtext/inputtext.figma.md).
diff --git a/src/stories/components/textarea/examples/textarea-disabled.component.ts b/src/stories/components/textarea/examples/textarea-disabled.component.ts
index 80264118..949376a2 100644
--- a/src/stories/components/textarea/examples/textarea-disabled.component.ts
+++ b/src/stories/components/textarea/examples/textarea-disabled.component.ts
@@ -6,8 +6,10 @@ export const Disabled: StoryObj = {
   name: 'Disabled',
   render: (args) => {
     const control = new FormControl({ value: 'Текст в заблокированном поле', disabled: true });
+    // invalid — геттер без сеттера, Storybook на попытке присвоить его напрямую роняет ошибку в консоль
+    const { invalid, ...rest } = args as Record<string, unknown>;
     return {
-      props: { ...args, control },
+      props: { ...rest, control },
       template: `<extra-textarea [formControl]="control" placeholder="Введите текст..."></extra-textarea>`
     };
   },
diff --git a/src/stories/components/textarea/examples/textarea-float-label.component.ts b/src/stories/components/textarea/examples/textarea-float-label.component.ts
index dd4636b5..f7f70429 100644
--- a/src/stories/components/textarea/examples/textarea-float-label.component.ts
+++ b/src/stories/components/textarea/examples/textarea-float-label.component.ts
@@ -1,110 +1,60 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { FloatLabel } from 'primeng/floatlabel';
-import { Textarea } from 'primeng/textarea';
-import { IconField } from 'primeng/iconfield';
-import { InputIcon } from 'primeng/inputicon';
 import { StoryObj } from '@storybook/angular';
-
-@Component({
-  selector: 'app-textarea-float-label',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Textarea, FloatLabel, ReactiveFormsModule, IconField, InputIcon],
-  template: `
-    <div class="w-80">
-      <p-floatlabel variant="in">
-        @if (showClear) {
-          <p-iconfield>
-            <textarea pTextarea id="fl-textarea" rows="3" [formControl]="control"></textarea>
-            <p-inputicon
-              class="ti ti-x"
-              [style.visibility]="control.value ? 'visible' : 'hidden'"
-              [style.pointerEvents]="control.value ? 'auto' : 'none'"
-              (click)="control.setValue('')"
-            ></p-inputicon>
-          </p-iconfield>
-        } @else {
-          <textarea pTextarea id="fl-textarea" rows="3" [formControl]="control"></textarea>
-        }
-        <label for="fl-textarea"
-          >{{ label }}
-          @if (required) {
-            <span class="text-red-500 ml-0.5">*</span>
-          }
-        </label>
-      </p-floatlabel>
-    </div>
-  `
-})
-export class TextareaFloatLabelComponent {
-  control = new FormControl('');
-  @Input() label = 'Комментарий';
-  @Input() required = false;
-  @Input() showClear = false;
-}
+import { ExtraTextareaComponent } from '../../../../lib/components/textarea/textarea.component';
 
 export const FloatLabelStory: StoryObj = {
   name: 'FloatLabel',
-  render: (args) => ({
-    props: { label: args['label'], required: args['required'], showClear: args['showClear'] },
-    template: `<app-textarea-float-label [label]="label" [required]="required" [showClear]="showClear"></app-textarea-float-label>`,
-  }),
+  render: (args) => {
+    const control = new FormControl('');
+    return {
+      props: { ...args, control },
+      template: `<extra-textarea [formControl]="control" label="Комментарий" [floatLabel]="true" [clearable]="clearable"></extra-textarea>`
+    };
+  },
   args: {
-    label: 'Комментарий',
-    required: false,
+    clearable: false
   },
   argTypes: {
-    label: {
-      control: 'text',
-      description: 'Текст плавающей метки',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "'Комментарий'" },
-        type: { summary: 'string' },
-      },
-    },
-    required: {
+    clearable: {
       control: 'boolean',
-      description: 'Показывает маркер обязательного поля `*` рядом с меткой',
+      description: 'Показывает иконку очистки поверх float-лейбла',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
+        type: { summary: 'boolean' }
+      }
+    }
   },
+  decorators: [
+    (story: any) => ({
+      ...story(),
+      moduleMetadata: {
+        imports: [ExtraTextareaComponent, ReactiveFormsModule]
+      }
+    })
+  ],
   parameters: {
     docs: {
       description: {
-        story:
-          'Интеграция с `p-floatlabel variant="in"` — плавающая метка внутри поля. `required` добавляет красный маркер `*`. Требует нативный `<textarea pTextarea>` как прямой дочерний элемент `p-floatlabel`.',
+        story: '`[floatLabel]="true"` — лейбл всплывает над полем при фокусе/значении, независимо от `labelPosition`.'
       },
       source: {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ExtraTextareaComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   standalone: true,
-  imports: [Textarea, FloatLabel, ReactiveFormsModule],
-  template: \`
-    <p-floatlabel variant="in">
-      <textarea
-        pTextarea
-        id="fl-textarea"
-        rows="3"
-        [formControl]="control"
-      ></textarea>
-      <label for="fl-textarea">Комментарий<span class="text-red-500 ml-0.5">*</span></label>
-    </p-floatlabel>
-  \`,
+  imports: [ExtraTextareaComponent, ReactiveFormsModule],
+  template: \`<extra-textarea [formControl]="control" label="Комментарий" [floatLabel]="true"></extra-textarea>\`,
 })
 export class FloatLabelExample {
   control = new FormControl('');
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
diff --git a/src/stories/components/textarea/examples/textarea-invalid.component.ts b/src/stories/components/textarea/examples/textarea-invalid.component.ts
index 31c4aece..7214f5ca 100644
--- a/src/stories/components/textarea/examples/textarea-invalid.component.ts
+++ b/src/stories/components/textarea/examples/textarea-invalid.component.ts
@@ -6,9 +6,11 @@ export const Invalid: StoryObj = {
   name: 'Invalid',
   render: (args) => {
     const control = new FormControl('', Validators.required);
+    // invalid — геттер без сеттера, Storybook на попытке присвоить его напрямую роняет ошибку в консоль
+    const { invalid, ...rest } = args as Record<string, unknown>;
     return {
-      props: { ...args, control },
-      template: `<extra-textarea [formControl]="control" placeholder="Обязательное поле"></extra-textarea>`
+      props: { ...rest, control },
+      template: `<extra-textarea [formControl]="control" label="Описание проблемы"></extra-textarea>`
     };
   },
   decorators: [
@@ -33,7 +35,7 @@ import { ExtraTextareaComponent } from '@cdek-it/angular-ui-kit';
 @Component({
   standalone: true,
   imports: [ExtraTextareaComponent, ReactiveFormsModule],
-  template: \`<extra-textarea [formControl]="control" placeholder="Обязательное поле"></extra-textarea>\`,
+  template: \`<extra-textarea [formControl]="control" label="Описание проблемы"></extra-textarea>\`,
 })
 export class InvalidExample {
   control = new FormControl('', Validators.required);
diff --git a/src/stories/components/textarea/examples/textarea-labels.component.ts b/src/stories/components/textarea/examples/textarea-labels.component.ts
new file mode 100644
index 00000000..f2f5446c
--- /dev/null
+++ b/src/stories/components/textarea/examples/textarea-labels.component.ts
@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { ExtraTextareaComponent } from '../../../../lib/components/textarea/textarea.component';
+
+const template = `
+<div class="flex flex-col gap-4">
+  <extra-textarea [formControl]="control" label="Лейбл сверху" placeholder="Введите текст..."></extra-textarea>
+  <extra-textarea [formControl]="control" labelPosition="left" label="Лейбл слева" placeholder="Введите текст..."></extra-textarea>
+  <extra-textarea [formControl]="control" label="С пояснением" caption="Пояснение под полем" placeholder="Введите текст..."></extra-textarea>
+  <extra-textarea [formControl]="control" label="С тултипом" info="Показывается только менеджеру" placeholder="Введите текст..."></extra-textarea>
+  <extra-textarea [formControl]="control" placeholder="Без лейбла и пояснения"></extra-textarea>
+</div>
+`;
+
+@Component({
+  selector: 'app-textarea-labels',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ExtraTextareaComponent, ReactiveFormsModule],
+  template
+})
+export class TextareaLabelsComponent {
+  control = new FormControl('');
+}
+
+export const Labels: StoryObj = {
+  render: () => ({
+    template: `<app-textarea-labels></app-textarea-labels>`
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Положения лейбла (labelPosition): top (по умолчанию) и left. caption — пояснение под полем, info — текст тултипа у иконки рядом с лейблом. Без label и caption поле не оборачивается.'
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ExtraTextareaComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-textarea-labels',
+  standalone: true,
+  imports: [ExtraTextareaComponent, ReactiveFormsModule],
+  template: \`
+    <extra-textarea [formControl]="control" label="Лейбл сверху"></extra-textarea>
+
+    <extra-textarea [formControl]="control" labelPosition="left" label="Лейбл слева"></extra-textarea>
+
+    <extra-textarea [formControl]="control" label="С пояснением" caption="Пояснение под полем"></extra-textarea>
+
+    <extra-textarea [formControl]="control" label="С тултипом" info="Показывается только менеджеру"></extra-textarea>
+
+    <!-- без label и caption поле не оборачивается -->
+    <extra-textarea [formControl]="control"></extra-textarea>
+  \`,
+})
+export class TextareaLabelsComponent {
+  control = new FormControl('');
+}
+        `
+      }
+    }
+  }
+};
diff --git a/src/stories/components/textarea/examples/textarea-readonly.component.ts b/src/stories/components/textarea/examples/textarea-readonly.component.ts
index 8073fb91..42657fcd 100644
--- a/src/stories/components/textarea/examples/textarea-readonly.component.ts
+++ b/src/stories/components/textarea/examples/textarea-readonly.component.ts
@@ -6,8 +6,10 @@ export const Readonly: StoryObj = {
   name: 'Readonly',
   render: (args) => {
     const control = new FormControl('Только для чтения — этот текст нельзя изменить.');
+    // invalid — геттер без сеттера, Storybook на попытке присвоить его напрямую роняет ошибку в консоль
+    const { invalid, ...rest } = args as Record<string, unknown>;
     return {
-      props: { ...args, control },
+      props: { ...rest, control },
       template: `<extra-textarea [formControl]="control" [readonly]="true" placeholder="Введите текст..."></extra-textarea>`
     };
   },
diff --git a/src/stories/components/textarea/examples/textarea-sizes.component.ts b/src/stories/components/textarea/examples/textarea-sizes.component.ts
index 0341cd21..43da1262 100644
--- a/src/stories/components/textarea/examples/textarea-sizes.component.ts
+++ b/src/stories/components/textarea/examples/textarea-sizes.component.ts
@@ -6,9 +6,11 @@ export const Sizes: StoryObj = {
   name: 'Sizes',
   render: (args) => {
     const control = new FormControl('');
+    // invalid — геттер без сеттера, Storybook на попытке присвоить его напрямую роняет ошибку в консоль
+    const { invalid, ...rest } = args as Record<string, unknown>;
     return {
-      props: { ...args, control },
-      template: `<extra-textarea [formControl]="control" [size]="size" [placeholder]="placeholder" [showClear]="showClear"></extra-textarea>`
+      props: { ...rest, control },
+      template: `<extra-textarea [formControl]="control" [size]="size" [placeholder]="placeholder" [clearable]="clearable"></extra-textarea>`
     };
   },
   args: {
diff --git a/src/stories/components/textarea/textarea.stories.ts b/src/stories/components/textarea/textarea.stories.ts
index 4552e09e..d04ff8cc 100644
--- a/src/stories/components/textarea/textarea.stories.ts
+++ b/src/stories/components/textarea/textarea.stories.ts
@@ -6,7 +6,8 @@ import { Readonly } from './examples/textarea-readonly.component';
 import { Invalid } from './examples/textarea-invalid.component';
 import { AutoResize, TextareaAutoResizeComponent } from './examples/textarea-autoresize.component';
 import { Sizes } from './examples/textarea-sizes.component';
-import { FloatLabelStory, TextareaFloatLabelComponent } from './examples/textarea-float-label.component';
+import { FloatLabelStory } from './examples/textarea-float-label.component';
+import { Labels, TextareaLabelsComponent } from './examples/textarea-labels.component';
 
 type TextareaArgs = ExtraTextareaComponent & { disabled: boolean; invalid: boolean };
 
@@ -16,7 +17,7 @@ const meta: Meta<TextareaArgs> = {
   tags: ['autodocs'],
   decorators: [
     moduleMetadata({
-      imports: [ExtraTextareaComponent, ReactiveFormsModule, TextareaAutoResizeComponent, TextareaFloatLabelComponent]
+      imports: [ExtraTextareaComponent, ReactiveFormsModule, TextareaAutoResizeComponent, TextareaLabelsComponent]
     })
   ],
   parameters: {
@@ -25,65 +26,98 @@ const meta: Meta<TextareaArgs> = {
       description: {
         component: `Многострочное текстовое поле для ввода данных.
 
+Реализовано по спецификации [textarea.md](https://github.com/cdek-it/angular-ui-kit/blob/main/docs/components-api/textarea.md).
+
 \`\`\`typescript
 import { ExtraTextareaComponent } from '@cdek-it/angular-ui-kit';
-\`\`\``
+\`\`\`
+
+Значение подключается через \`[(ngModel)]\` или \`[formControl]\` (ControlValueAccessor). Состояния disabled и invalid управляются через FormControl.`
       }
     }
   },
   argTypes: {
-    placeholder: {
+    // ── Свойства (docs/components-api/textarea.md) ─────────────────
+    label: {
       control: 'text',
-      description: 'Подсказка при пустом поле',
+      description: 'Текст названия поля',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: "''" },
         type: { summary: 'string' }
       }
     },
-    size: {
+    labelPosition: {
       control: 'select',
-      options: ['small', 'base', 'large', 'xlarge'],
-      description: 'Размер поля',
+      options: ['top', 'left'],
+      description: 'Положение лейбла',
       table: {
-        category: 'Props',
-        defaultValue: { summary: "'base'" },
-        type: { summary: "'small' | 'base' | 'large' | 'xlarge'" }
+        category: 'Свойства',
+        defaultValue: { summary: "'top'" },
+        type: { summary: "'top' | 'left'" }
       }
     },
-    disabled: {
+    floatLabel: {
       control: 'boolean',
-      description: 'Отключает взаимодействие — управляется через FormControl',
+      description: 'Лейбл-плейсхолдер, всплывающий над полем при фокусе/значении',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' }
       }
     },
-    invalid: {
-      control: 'boolean',
-      description: 'Невалидное состояние — управляется через FormControl',
+    caption: {
+      control: 'text',
+      description: 'Текст пояснения под полем',
       table: {
-        category: 'Props',
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' }
+        category: 'Свойства',
+        defaultValue: { summary: "''" },
+        type: { summary: 'string' }
       }
     },
-    readonly: {
+    info: {
+      control: 'text',
+      description: 'Текст тултипа иконки рядом с лейблом',
+      table: {
+        category: 'Свойства',
+        defaultValue: { summary: "''" },
+        type: { summary: 'string' }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Подсказка при пустом поле',
+      table: {
+        category: 'Свойства',
+        defaultValue: { summary: "''" },
+        type: { summary: 'string' }
+      }
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'base', 'large', 'xlarge'],
+      description: 'Размер поля',
+      table: {
+        category: 'Свойства',
+        defaultValue: { summary: "'base'" },
+        type: { summary: "'small' | 'base' | 'large' | 'xlarge'" }
+      }
+    },
+    clearable: {
       control: 'boolean',
-      description: 'Только для чтения',
+      description: 'Показывает иконку очистки при наличии значения',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' }
       }
     },
-    showClear: {
+    resizable: {
       control: 'boolean',
-      description: 'Показывает иконку очистки при наличии значения',
+      description: 'Разрешает нативный resize-уголок (перетаскиванием)',
       table: {
-        category: 'Props',
-        defaultValue: { summary: 'false' },
+        category: 'Свойства',
+        defaultValue: { summary: 'true' },
         type: { summary: 'boolean' }
       }
     },
@@ -91,7 +125,7 @@ import { ExtraTextareaComponent } from '@cdek-it/angular-ui-kit';
       control: 'boolean',
       description: 'Растягивает поле на всю ширину контейнера',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' }
       }
@@ -100,99 +134,153 @@ import { ExtraTextareaComponent } from '@cdek-it/angular-ui-kit';
       control: 'boolean',
       description: 'Автоматически увеличивает высоту по мере ввода',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' }
       }
     },
     rows: {
       control: 'number',
-      description: 'Количество видимых строк',
+      description: 'Стартовая высота поля в строках',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: '3' },
         type: { summary: 'number' }
       }
     },
     cols: {
       control: 'number',
-      description: 'Количество видимых столбцов',
+      description: 'Ширина поля в символах',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'undefined' },
         type: { summary: 'number' }
       }
     },
+    autofocus: {
+      control: 'boolean',
+      description: 'Автофокус при монтировании компонента',
+      table: {
+        category: 'Свойства',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' }
+      }
+    },
+    // ── Состояния (управляются через FormControl) ───────────────────
+    disabled: {
+      control: 'boolean',
+      description: 'Отключённое состояние — управляется через FormControl',
+      table: {
+        category: 'Состояния',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' }
+      }
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Невалидное состояние — вычисляется из NgControl (Validators)',
+      table: {
+        category: 'Состояния',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' }
+      }
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Только для чтения',
+      table: {
+        category: 'Состояния',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' }
+      }
+    },
     // Hidden computed props
     modelValue: { table: { disable: true } },
     primeSize: { table: { disable: true } },
     sizeClass: { table: { disable: true } },
-    // Events
+    inputId: { table: { disable: true } },
+    // ── События ──────────────────────────────────────────────────
     onResize: {
       control: false,
-      description: 'Событие изменения высоты поля (при autoResize)',
+      description: 'Событие изменения высоты поля пользователем',
       table: {
-        category: 'Events',
-        type: { summary: 'EventEmitter<{ height: string }>' }
+        category: 'События',
+        type: { summary: 'EventEmitter<ExtraTextareaResizeEvent>' }
       }
     },
     onClear: {
       control: false,
-      description: 'Событие очистки поля (при showClear)',
+      description: 'Событие очистки поля (при clearable)',
       table: {
-        category: 'Events',
+        category: 'События',
         type: { summary: 'EventEmitter<void>' }
       }
     }
   },
   args: {
+    label: 'Комментарий',
+    labelPosition: 'top',
+    floatLabel: false,
+    caption: '',
+    info: '',
     placeholder: 'Введите текст...',
     size: 'base',
-    disabled: false,
-    invalid: false,
-    readonly: false,
-    showClear: false,
+    clearable: false,
+    resizable: true,
     fluid: false,
     autoResize: false,
-    rows: 3
+    rows: 3,
+    autofocus: false,
+    disabled: false,
+    invalid: false,
+    readonly: false
   }
 };
 
 export default meta;
 type Story = StoryObj<TextareaArgs>;
 
-// ── Default ──────────────────────────────────────────────────────────────────
+// ── Default (интерактивная) ────────────────────────────────────────────────
 export const Default: Story = {
   name: 'Default',
   render: (args) => {
     const parts: string[] = [];
 
+    if (args.label) parts.push(`label="${args.label}"`);
+    if (args.labelPosition && args.labelPosition !== 'top') parts.push(`labelPosition="${args.labelPosition}"`);
+    if (args.floatLabel) parts.push(`[floatLabel]="true"`);
+    if (args.caption) parts.push(`caption="${args.caption}"`);
+    if (args.info) parts.push(`info="${args.info}"`);
     if (args.placeholder) parts.push(`placeholder="${args.placeholder}"`);
     if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`);
+    if (args.clearable) parts.push(`[clearable]="true"`);
+    if (!args.resizable) parts.push(`[resizable]="false"`);
     if (args.readonly) parts.push(`[readonly]="true"`);
-    if (args.showClear) parts.push(`[showClear]="true"`);
     if (args.fluid) parts.push(`[fluid]="true"`);
     if (args.autoResize) parts.push(`[autoResize]="true"`);
     if (args.rows && args.rows !== 3) parts.push(`[rows]="${args.rows}"`);
     if (args.cols) parts.push(`[cols]="${args.cols}"`);
+    if (args.autofocus) parts.push(`[autofocus]="true"`);
 
-    const validators = [];
-    if (args.invalid) validators.push(Validators.required);
-
+    const validators = args.invalid ? [Validators.required] : [];
     const control = new FormControl({ value: '', disabled: args.disabled }, validators);
 
     const template = `<extra-textarea [formControl]="control"\n  ${parts.join('\n  ')}\n></extra-textarea>`;
 
-    return { props: { ...args, control }, template };
+    // invalid и disabled живут во FormControl: у компонента invalid — геттер без сеттера,
+    // и Storybook на попытке его присвоить роняет ошибку в консоль
+    const { invalid, disabled, ...rest } = args;
+
+    return { props: { ...rest, control }, template };
   },
   parameters: {
     docs: {
       description: {
-        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.'
+        story: 'Интерактивное поле со всеми свойствами спецификации. Используйте Controls для изменения пропсов; disabled и invalid управляются через FormControl.'
       }
     }
   }
 };
 
-// ── Re-exports from example components ────────────────────────────────────
-export { Disabled, Readonly, Invalid, AutoResize, Sizes, FloatLabelStory as FloatLabel };
+// ── Комбинаторные истории ──────────────────────────────────────────────────
+export { Labels, Disabled, Readonly, Invalid, AutoResize, Sizes, FloatLabelStory as FloatLabel };