Для короткого однострочного значения используйте CdsTextInput, для выбора из готовых вариантов — CdsSelect.

Анатомия

Сверху — лейбл и описание, в центре — многострочное поле с кнопкой очистки, под полем — строка сообщений и счётчик символов. Устройство совпадает с CdsTextInput: доступны те же зоны prepend / append снаружи и внутри рамки — как пропсы *-icon и одноимённые слоты.

Storybook

Вариации

Лейбл и описание

Свойство label называет поле, description добавляет вспомогательный текст под лейблом. Одноимённые слоты принимают произвольную разметку.

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';
</script>

<template>
  <CdsTextArea
    label="Заголовок"
    description="Описание для элемента формы или вспомогательный текст"
    placeholder="Введите текст"
    class="max-w-sm m-auto"
  />
</template>

Количество строк

Свойство rows задаёт высоту области в строках — по умолчанию 5. Выбирайте высоту под ожидаемый объём ответа: для комментария хватит 2–3 строк.

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';
</script>

<template>
  <div class="max-w-sm m-auto">
    <CdsTextArea label="rows: 2" :rows="2" placeholder="Введите текст" />
    <CdsTextArea label="rows: 5 (по умолчанию)" placeholder="Введите текст" />
    <CdsTextArea label="rows: 8" :rows="8" placeholder="Введите текст" />
  </div>
</template>

Автоматическая высота

Свойство auto-grow увеличивает высоту области по мере ввода — текст не приходится прокручивать. max-rows ограничивает рост числом строк, max-height — высотой в пикселях; дальше появляется прокрутка.

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';
import { ref } from 'vue';

const value = ref('Съешь ещё этих мягких французских булок,\nда выпей чаю.');
</script>

<template>
  <div class="max-w-sm m-auto">
    <CdsTextArea v-model="value" label="autoGrow" auto-grow :rows="2" placeholder="Начните вводить текст" />
    <CdsTextArea
      v-model="value"
      label="autoGrow + maxRows: 4"
      auto-grow
      :rows="2"
      :max-rows="4"
      placeholder="Начните вводить текст"
    />
  </div>
</template>

Изменение размера

По умолчанию пользователь может растянуть область за правый нижний угол. Свойство no-resize отключает это; при auto-grow ручное изменение размера отключается автоматически.

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';
</script>

<template>
  <div class="max-w-sm m-auto">
    <CdsTextArea label="Обычная область (resize доступен)" :rows="3" placeholder="Введите текст" />
    <CdsTextArea label="noResize" no-resize :rows="3" placeholder="Введите текст" />
  </div>
</template>

Очистка

Свойство clearable показывает иконку очистки при наведении или фокусе, persistent-clearable держит её видимой всегда.

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';
import { ref } from 'vue';

const value = ref('Очисти меня!');
</script>

<template>
  <CdsTextArea
    v-model="value"
    placeholder="Введите значение"
    hint="Это поле можно очистить"
    clearable
    persistent-clearable
    :rows="3"
    class="max-w-sm m-auto"
  />
</template>

Счётчик

Свойство counter показывает счётчик символов: true — без лимита, число — с лимитом. counter-value принимает свою формулу подсчёта, persistent-counter оставляет счётчик видимым вне фокуса. Чтобы лимит нельзя было превысить, добавьте атрибут maxlength.

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';

const wordCount = (value: unknown) => (value ?? '').toString().trim().split(/\s+/).filter(Boolean).length;
</script>

<template>
  <div class="max-w-sm m-auto">
    <CdsTextArea label="counter true" placeholder="Просто счётчик" counter :rows="3" />
    <CdsTextArea label="counter с лимитом" placeholder="До 200 символов" counter="200" maxlength="200" :rows="3" />
    <CdsTextArea label="persistentCounter" placeholder="Счётчик всегда виден" counter persistent-counter :rows="3" />
    <CdsTextArea
      label="counterValue (слова)"
      placeholder="Считаем слова"
      counter
      :counter-value="wordCount"
      :rows="3"
    />
  </div>
</template>

Состояния

disabled блокирует ввод и снижает контрастность, readonly запрещает изменение, но оставляет фокус и копирование, loading показывает индикатор загрузки — полосой или кругом (loading="circle").

Sandbox Storybook

<script setup lang="ts">
import { CdsTextArea } from '@central-design-system/components';
</script>

<template>
  <div class="max-w-sm m-auto">
    <CdsTextArea label="Disabled" model-value="Значение" :rows="2" disabled />
    <CdsTextArea label="Readonly" model-value="Только для чтения" :rows="2" readonly />
    <CdsTextArea label="Loading" model-value="Загрузка" :rows="2" loading />
    <CdsTextArea label="Loading circle" model-value="Загрузка" :rows="2" loading="circle" />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Отправка обращения

Форма собирается из CdsForm, короткой темы в текстовом поле и сообщения в текстовой области. Свойство rules проверяет, что сообщение достаточно подробное, а counter с maxlength заранее показывают лимит. Кнопка получает loading на время запроса.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsForm,
  CdsTextArea,
  CdsTextInput,
  type SubmitEventPromise
} from '@central-design-system/components';
import { ref } from 'vue';

const subject = ref('');
const message = ref('');
const loading = ref(false);
const sent = ref(false);

const rules = {
  subject: [(value: string) => !!value || 'Введите тему обращения'],
  message: [
    (value: string) => !!value || 'Опишите вопрос',
    (value: string) => value.trim().length >= 20 || 'Расскажите подробнее — не меньше 20 символов'
  ]
};

async function onSubmit(event: SubmitEventPromise) {
  sent.value = false;

  const { valid } = await event;

  if (!valid) return;

  loading.value = true;

  setTimeout(() => {
    loading.value = false;
    sent.value = true;
  }, 1500);
}
</script>

<template>
  <CdsForm class="flex flex-col gap-2 w-[350px] m-auto" @submit.prevent="onSubmit">
    <CdsTextInput v-model="subject" :rules="rules.subject" label="Тема" placeholder="Кратко о сути вопроса" />
    <CdsTextArea
      v-model="message"
      :rules="rules.message"
      label="Сообщение"
      placeholder="Что случилось и как это воспроизвести"
      :rows="4"
      counter="500"
      maxlength="500"
    />
    <div class="mt-2">
      <CdsButton :loading="loading" type="submit">Отправить</CdsButton>
    </div>
    <div v-if="sent" class="text-sm text-content-secondary">Сообщение отправлено — ответим в течение дня.</div>
  </CdsForm>
</template>

Комментарий в обсуждении

Компактное поле комментария: rows="1" и auto-grow с max-rows — область начинается с одной строки и растёт вместе с текстом, hide-details убирает нижний блок. Кнопка отправки — CdsFunctionalButton в слоте append-inner; Enter отправляет комментарий, Shift+Enter переносит строку.

Sandbox Storybook

<script setup lang="ts">
import { CdsFunctionalButton, CdsTextArea } from '@central-design-system/components';
import { ref } from 'vue';

const draft = ref('');
const comments = ref(['Отличная идея, поддерживаю.']);

const send = () => {
  const text = draft.value.trim();

  if (!text) return;

  comments.value.push(text);
  draft.value = '';
};
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-3 m-auto">
    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="(comment, index) in comments" :key="index">{{ comment }}</li>
    </ul>

    <CdsTextArea
      v-model="draft"
      placeholder="Написать комментарий"
      auto-grow
      :rows="1"
      :max-rows="6"
      hide-details
      @keydown.enter.exact.prevent="send"
    >
      <template #append-inner>
        <CdsFunctionalButton icon="arrow-up" aria-label="Отправить комментарий" @click="send" />
      </template>
    </CdsTextArea>
  </div>
</template>

Ошибка с сервера

Ответ сервера кладётся в error-messages как есть — валидация через rules для этого не нужна. Сбрасывайте ошибку при изменении значения, чтобы поле не ругалось на уже исправленный текст.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsTextArea } from '@central-design-system/components';
import { ref } from 'vue';

const description = ref('Надёжная компания, подробности на example.com');
const loading = ref(false);
const serverErrors = ref<string[]>([]);

const publish = async () => {
  loading.value = true;
  serverErrors.value = [];

  // Имитация ответа сервера
  await new Promise((resolve) => setTimeout(resolve, 1000));

  loading.value = false;
  serverErrors.value = ['Уберите ссылки из описания — модерация их не пропустит'];
};
</script>

<template>
  <form class="flex w-full max-w-md flex-col gap-4 m-auto" @submit.prevent="publish">
    <CdsTextArea
      v-model="description"
      label="Описание компании"
      :rows="3"
      :error-messages="serverErrors"
      @update:model-value="serverErrors = []"
    />

    <CdsButton class="self-start" type="submit" text="Опубликовать" :loading="loading" />
  </form>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние поля
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
appendInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте append после содержимого поля
autocomplete	string | undefined	—	Помогает влиять на предложения браузера. Значение «suppress» изменяет атрибут name полей, а значение «off» полагается на то, что браузер по собственной инициативе перестанет предлагать значения. Любое другое значение передается встроенной функции автозаполнения для соответствующего элемента.
autofocus	boolean | undefined	—	Включает автофокус
autoGrow	boolean | undefined	—	Автоматическое увеличение высоты текстовой области при вводе
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
centerAffix	boolean | undefined	—	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
clearable	boolean | undefined	—	Отображать кнопку очистки значения
clearIcon	IconValue | undefined	'remove'	Иконка кнопки очистки
color	string | undefined	—	Цвет компонента
counter	string | number | boolean | undefined	—	Счетчик символов. Принимает булево значение, число или строку
counterValue	number | ((value: any) => number) | undefined	—	Пользовательское значение счетчика. Может быть числом или функцией вычисления от текущего значения
description	string | undefined	—	Описание компонента, отображаемое под меткой
dirty	boolean | undefined	—	Признак того, что значение поля было изменено пользователем
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Состояние ошибки
errorMessages	string | readonly string[] | null | undefined	[]	Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках. Будет объединяться с любыми проверками, заданными в свойстве rules. Это поле не запускает валидацию.
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
hideDetails	boolean | "auto" | undefined	—	Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
hint	string | undefined	—	Текст подсказки, отображаемый под полем ввода
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Уникальный идентификатор компонента
label	string | undefined	—	Текст метки (label) компонента
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
maxErrors	string | number | undefined	1	Максимальное число отображаемых ошибок при валидации
maxHeight	string | number | undefined	—	Максимальная высота текстовой области
maxRows	string | number | undefined	—	Максимальное количество строк при автоматическом увеличении высоты
maxWidth	string | number | undefined	—	Максимальная ширина компонента
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelModifiers	Record<string, boolean> | undefined	—	Модификаторы v-model, переданные Vue для обработки значения поля
modelValue	any	—	Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
name	string | undefined	—	Имя поля ввода
noResize	boolean | undefined	—	Отключить возможность изменения размера текстовой области
persistentClearable	boolean | undefined	—	Всегда отображать кнопку очистки, а не только при наведении или фокусе
persistentCounter	boolean | undefined	—	Всегда отображать счетчик, а не только при взаимодействии с полем
persistentHint	boolean | undefined	—	Всегда отображать подсказку, а не только при фокусе
persistentPlaceholder	boolean | undefined	—	Всегда отображать placeholder, а не скрывать его при взаимодействии с полем
placeholder	string | undefined	—	Текст-заполнитель, отображаемый в пустом поле
prefix	string | undefined	—	Текстовый префикс, отображаемый перед значением поля
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
prependInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте prepend перед содержимым поля
readonly	boolean | null | undefined	null	Только для чтения
reverse	boolean | undefined	—	Обратный порядок расположения элементов внутри поля
rows	string | number | undefined	5	Количество строк текстовой области
rules	readonly ValidationRule[] | undefined	[]	Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк. Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке. Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
suffix	string | undefined	—	Текстовый суффикс, отображаемый после значения поля
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
validateOn	ValidateOn | undefined	—	Изменяет тип события, при котором запускается валидация
validationValue	any	—	Значение, используемое при применении правил валидации
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
click:control	[e: MouseEvent]	Событие, возникающее при клике в основной области контрола
mousedown:control	[e: MouseEvent]	Событие, которое срабатывает при нажатии кнопки мыши в основной области контрола
update:focused	[focused: boolean]	Вызывается при переходе фокуса на элемент или при его потере
update:modelValue	[value: string]	Событие, которое срабатывает при изменении модели компонента
update:rows	[rows: number]	Событие изменения вычисленного количества строк при автоматическом увеличении высоты

Слоты

Имя	Тип	Описание
append	CdsInputSlot	Добавляет элемент после поля ввода
append-inner	CdsInputDefaultSlot	Слот, добавляемый в конце инпута ввода
clear	CdsInputDefaultSlot & { props: Record<string, any>; }	Слот для пользовательского иконки очистки (отображается, когда свойство clearable имеет значение «true»).
counter	CdsCounterSlot	Слот для ввода пользовательского счетчика
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
details	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel
loader	LoaderSlotProps	Слот для пользовательского загрузчика (отображается, если свойство loading имеет значение true).
message	CdsMessageSlot	Слот для настройки содержания сообщения
messages	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
prepend	CdsInputSlot	Добавляет элемент до поля ввода
prepend-inner	CdsInputDefaultSlot	Слот, добавляемый в начало инпута ввода

Exposed

Имя	Тип	Описание
controlRef	HTMLElement | undefined	Ref-ссылка на контролл поля ввода
fieldIconColor	string | undefined	Цвет иконки
isDirty	boolean	Является ли поле ввода "грязным"
isDisabled	boolean	Является ли поле ввода заблокированным
isPure	boolean	Является ли поле ввода "чистым"
isReadonly	boolean	Является ли поле ввода только для чтения
isValid	boolean | null	Является ли поле ввода валидным
isValidating	boolean	Является ли поле ввода в процессе валидации
reset	() => Promise<void>	Функция сброса поля ввода в исходное состояние
resetValidation	() => Promise<void>	Функция сброса валидации поля ввода
validate	(silent?: boolean) => Promise<string[]>	Функция валидации поля ввода