Исходник ↗Песочница ↗

Textarea

Компонент для ввода многострочного текста. Поддерживает автоматическое изменение высоты в зависимости от содержимого и предоставляет удобный интерфейс для работы с текстовыми полями.

Загружается...

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать value или передавать defaultValue, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств value/onChange для задания значения и его изменения.

// Неконтролируемое состояние
<Textarea defaultValue="Текст" />;
 
// Контролируемое состояние
const [text, setText] = React.useState('Текст');
 
<Textarea value={text} onChange={(event) => setText(event.target.value)} />;

Состояния

disabled

Свойство disabled позволяет пометить компонент, как недоступный для взаимодействия.

Загружается...

Валидация

Свойство status используется для состояния валидации компонента - некорректности заполненного поля (значение "error") или успешной валидации (значение "valid").

Загружается...

Доступность (a11y)

Компонент обеспечивает базовую доступность, используя нативный элемент <textarea>, поддерживая все стандартные HTML- и aria-атрибуты.

Для улучшения доступности рекомендуется использовать обёртку FormItem для компонента Input для поддержки заголовка и описания поля.

Свойства и методы

СвойствоОписание
afterReactNode

Добавляет иконку справа.

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

  • Используйте следующие размеры иконок 12 | 16 | 20 | 24 | 28.
  • Используйте IconButton ↗, если вам нужна иконка, реагируюущая на нажатие.
По умолчанию: -
afterAlignFieldIconsAlign

Вертикальное выравнивание иконки справа.

По умолчанию: -
alignAlignType
По умолчанию: -
beforeReactNode

Добавляет иконку слева.

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

  • Используйте следующие размеры иконок 12 | 16 | 20 | 24 | 28.
  • Используйте IconButton ↗, если вам нужна иконка, реагирующая на нажатие.
По умолчанию: -
beforeAlignFieldIconsAlign

Вертикальное выравнивание иконки слева.

По умолчанию: -
defaultValuestring

Значение по умолчанию.

По умолчанию: -
getRefRef<HTMLTextAreaElement>

Deprecated: Since 7.9.0. Вместо этого используйте slotProps={ textArea: { getRootRef: ... } }.

По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
growboolean

Свойство управляющее автоматическим изменением высоты компонента.

По умолчанию: true
maxHeightnumber

Максимальная высота поля.

По умолчанию: -
mode"default" | "plain"

Режим отображения.

  • default — показывает фон, обводку и, при наличии, текст-подсказку.
  • plain — показывает только текст-подсказку.
По умолчанию: -
onResize((el: HTMLTextAreaElement) => void)

Обработчик, срабатывающий при изменении размера компонента.

По умолчанию: -
slotProps{ root?: (HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute); textArea?: (TextareaHTMLAttributes<...> & ... 1 more ... & HasDataAttribute) | undefined; } | undefined

Свойства, которые можно прокинуть внутрь компонента:

  • root: свойства для прокидывания в корень компонента;
  • textArea: свойства для прокидывания в поле ввода.
По умолчанию: -
status"default" | "error" | "valid"

Статус отображения поля в форме.

По умолчанию: -
Предыдущая
Switch
Следующая
WriteBar