FieldTextArea

Многострочное текстовое поле. Базируется на FieldDecorator поверх нативного <textarea> с авто-resize (react-textarea-autosize). Поддерживает высоту по minRows/maxRows, опциональный ручной resize за нижний правый угол, кнопки очистки и копирования, слот footer под полем. Фон acrylic общий с остальными полями @cloud-ru/ds-fields.

Когда использовать

• Длинные тексты: комментарии, описания, отзывы, сообщения.
• Bio/about-форм поля с лимитом символов (maxLength + автоматический счётчик).
• Read-only многострочное значение с кнопкой копирования (логи, сгенерированные тексты).
• Поддерживает controlled (value + onChange) и uncontrolled (defaultValue) режимы.

Анатомия

Size (default m)

ValidationState (default default)

Через проп error форсится error. Иконка слева от подсказки появляется при showHintIcon.

Высота

Поле растёт под контент автоматически — от minRows строк и до maxRows, после чего включается вертикальный скролл.

Кнопки очистки и копирования

В postfix-колонке поля рендерятся служебные кнопки. Управляются showClearButton / showCopyButton.

• showClearButton — кнопка очистки. Видна при непустом value и !readonly && !disabled (default true).
• showCopyButton — кнопка копирования значения в буфер. Видна при непустом value в режиме readonly (и !disabled, default true). После нажатия кратко показывает галочку-подтверждение.

Кнопки попадают в Tab-навигацию через postfix-стрелки, как у FieldText.

Footer

Слот footer рендерится отдельной строкой под <textarea> внутри границы поля — для действий, плагинов-счётчиков или подсказок, привязанных к самому полю (в отличие от hint/caption, которые живут в FieldDecorator снаружи).

Установка

pnpm add @cloud-ru/ds-fields

import { FieldTextArea } from '@cloud-ru/ds-fields'

Примеры использования

Базовое поле

import { FieldTextArea } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function TextArea() {
  const [value, setValue] = useState('');
  return (
    <FieldTextArea
      label='Комментарий'
      placeholder='Расскажите подробнее'
      hint='До 500 символов'
      minRows={3}
      maxRows={8}
      value={value}
      onChange={setValue}
    />
  );
}

Изменяемый размер

import { FieldTextArea } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function TextAreaResizable() {
  const [value, setValue] = useState('Потяните за нижний правый угол.');
  return (
    <FieldTextArea
      label='Описание'
      hint='Можно изменить высоту мышью'
      minRows={3}
      maxRows={20}
      resizable
      value={value}
      onChange={setValue}
    />
  );
}

Счётчик длины

import { FieldTextArea } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function TextAreaWithLength() {
  const [value, setValue] = useState('');
  return (
    <FieldTextArea label='Bio' hint='Кратко о себе' maxLength={120} minRows={3} value={value} onChange={setValue} />
  );
}

Uncontrolled

import { FieldTextArea } from '@cloud-ru/ds-fields';

export function TextAreaUncontrolled() {
  return (
    <FieldTextArea
      label='Заметка'
      hint='Uncontrolled: начальное значение через defaultValue'
      defaultValue={'Первая строка\nВторая строка'}
      minRows={3}
      maxRows={8}
    />
  );
}

Readonly с копированием

import { FieldTextArea } from '@cloud-ru/ds-fields';

export function TextAreaReadonly() {
  return (
    <FieldTextArea
      label='Сгенерированный конфиг'
      readonly
      value={'server:\n  host: 0.0.0.0\n  port: 8080'}
      minRows={3}
      maxRows={8}
    />
  );
}

Props

Types

FieldTextAreaProps

FieldLayoutPresets

Related props

FieldLength

QuestionTooltipProps

Size

ValidationState

Storybook

Figma