FieldDescription

Многострочное поле описания поверх FieldTextArea с встроенной yup-валидацией длины (до 255 символов, со счётчиком). По умолчанию необязательное. Доступно в двух вариантах: standalone (FieldDescription, локальный стейт + onValidationError) и FieldDescriptionRHF (react-hook-form через Controller). Опционально может сворачиваться в кнопку «Добавить описание».

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

• Ввод необязательного/обязательного описания сущности с ограничением длины.
• В форме на react-hook-form — вариант FieldDescriptionRHF.
• Когда описание необязательно и его лучше скрыть до клика — addButton.

Когда не нужен FieldDescription:

• Короткое однострочное имя — FieldName.

Анатомия

Валидация

Встроенная схема (yup): обрезка пробелов (trim) и ограничение длины maxLength (по умолчанию 255) с сообщением и счётчиком. customSchema конкатенируется к встроенной. При required добавляется проверка обязательности.

addButton

Если addButton и поле необязательное (required={false}) — вместо textarea показывается кнопка «Добавить описание». Клик раскрывает поле и ставит в него фокус.

Режимы

• FieldDescription — локальный стейт, ошибка отдаётся через onValidationError(error).
• FieldDescriptionRHF — controllerProps для react-hook-form.

Size (default m)

Размер поля наследуется от FieldTextArea: s, m, l.

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

Базовый

import { FieldDescription } from '@cloud-ru/ds-uikit-product-fields-predefined';

export function FieldDescriptionBasic() {
  return <FieldDescription />;
}

С кнопкой «Добавить»

import { FieldDescription } from '@cloud-ru/ds-uikit-product-fields-predefined';

export function FieldDescriptionWithAddButton() {
  return <FieldDescription addButton />;
}

React Hook Form

import { Button } from '@cloud-ru/ds-button';
import { FieldDescriptionRHF } from '@cloud-ru/ds-uikit-product-fields-predefined';
import { FormProvider, useForm } from 'react-hook-form';

type FormValues = { description: string };

export function FieldDescriptionRHFExample() {
  const methods = useForm<FormValues>({ defaultValues: { description: '' }, mode: 'onBlur' });

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={methods.handleSubmit(values => alert(`description: ${values.description}`))}
        style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 360 }}
      >
        <FieldDescriptionRHF controllerProps={{ name: 'description' }} />
        <Button type='submit' label='Отправить' />
      </form>
    </FormProvider>
  );
}

Props

Types

FieldDescriptionProps

Related props

FieldLayoutPresets

FieldLength

QuestionTooltipProps

Size

ValidationState

Адаптивность

autoFocus на mobile выключается (наследуется из @cloud-ru/ds-fields) — автофокус там открывает экранную клавиатуру без действия пользователя. Раскладка читается из AdaptiveProvider (@cloud-ru/ds-adaptive); отдельного пропа layoutType нет. Вернуть автофокус на mobile — пропом layoutPresets:

<FieldDescription autoFocus layoutPresets={{ mobile: { autoFocus: true } }} />

size от раскладки не зависит — задаётся пропом (по умолчанию m) одинаково на всех раскладках.

Storybook