Дизайн в БАРС Груп

Определение

Text area (Поле ввода многострочного текста) — это компонент пользовательского интерфейса, предназначенный для ввода больших объемов текста. В отличие от стандартного Поля ввода (Input), text area поддерживает несколько строк текста, что делает его идеальным выбором для задач, где требуется подробное текстовое описание или длительный ввод.

Функциональность

Используется когда необходимо ввести текст, превышающий одну строку.

Позволяет пользователям самостоятельно увеличить или уменьшить размер поля, чтобы удобно просматривать или редактировать текст.

Поле может автоматически подстраиваться под объем введенного текста, оставаясь компактным для небольших сообщений и удобным для длинных текстов.

Если существует ограничение на количество символов или слов, то следует использовать счетчики символов или слов.

Может быть настроен под конкретные задачи: ограничение длины текста, запрет на ввод определенных символов, интеграция с дополнительными подсказками и валидацией.

Если требуется форматирование текста, используйте его вместе с Text Editor. Этот инструмент поможет структурировать текст, добавлять заголовки, списки, ссылки и другие элементы для удобства чтения и восприятия.

Дизайн и Стиль

Размер и Форма

По умолчанию высота многострочного поля составляет три строки текста.

Ширина поля для многострочного текста должна быть в пределах 30–80 символов, то есть около 300–600 px.

По высоте размер Text Area адаптируется под контент. Для ввода коротких текстов он может быть компактным, а для длинных — увеличенным или с возможностью изменения размеров вручную.

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Варианты

Поле ввода без Text area

Используется, когда пользователю нужно ввести текст без каких-либо элементов форматирования. Это поле идеально подходит для:

Ввода комментариев, описаний или заметок.
Форм, где требуется текстовый ответ без дополнительного оформления.
Простого ввода данных, например, адреса, контактной информации или вопросов.

Поле ввода с Text editor

Используется, когда пользователю требуется возможность форматирования текста. Это подходит для:

Создания текстов с заголовками, списками, ссылками или выделением.
Редактирования контента для публикаций, писем или описаний.
Добавления структурированных текстовых данных, например, для статей, блогов или отчетов.

Поле ввода с ограничением символов

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

Когда лимит символов достигается, ввод текста блокируется, и пользователь не может добавить больше символов. Это помогает избежать превышения установленного ограничения.