Text Input

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

§Применение

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

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

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

1. Когда ожидается, что достаточно ввести текст в одну строку.
2. Когда невозможно выбрать вариант из заранее определенного списка.
3. Когда можно уместить введенную информацию, а для ввода не требуется более сложных интерфейсов.

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

1. Когда нужно ввести параметр только из предопределенного списка, необходимо избегать использования данного компонента, поскольку это может привести к ошибке. В таких случаях лучше использовать другие компоненты с определённым выбором вариантов значений, например, Select, Radio Button, Radio или Checkbox.
2. Когда требуется ввод большого количества символов (больше 5 слов). Для этого лучше рассмотреть компонент для многострочного ввода текста — TextArea.

§Типы

Существует два типа TextInput: Normal и Clear, которые имеют одинаковый набор функций, но выглядят по-разному и применяются в зависимости от контекста.

Normal

• Наиболее часто используемый вид.
• Отличительной особенностью является то, что у компонента есть внутренние отступы и скругления (параметры, которые зависят от размера элемента), а также обводка 1 px.
• Используется в формах, когда между компонентами необходимо использовать свободное пространство в виде отступов между элементами в форме.

Clear

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

§Структура

1. Левая иконка (Left icon)

• Является опциональным элементом.
• Иконка может быть использована в качестве дополнительной идентификации поля.
• Например, если это поисковая строка, может использоваться иконка «лупа», если это поле для ввода пароля — иконка «ключ».

2. Внутренний лейбл (Inline label)

• Является опциональным элементом.
• Усиливает значение имени поля.
• Заменяет внешний лейбл.
• Используется как имя поля, так как при вводе значения подсказка пропадает и суть поля становится непонятной.

3. Значение (Value)

• Является обязательным элементом.
• Место, которое используется для текста подсказки (хинта) и введенного текста.
• Введенный текст заменяет подсказку сразу после ввода первого символа.

4. Кнопка очистки (Clear button)

• Является опциональным элементом.
• Используется, если нужно очистить поле.
• Отображается, когда в поле введен хотя бы один символ.
• Отображается даже в случае, когда фокус находится вне поля.
• Является компонентом Button типа Flat-secondary и наследует все его свойства. Например, по hover фон крестика будет с заливкой.
• При клике на кнопку очистки фокус переходит в поле, а введенное значение стирается.

5. Встроенные кнопки (Inline buttons)

• Является опциональным элементом и встраивается справа.
• Используется, если требуется более явно обозначить связь между содержимым и действиями. Такие кнопки можно разместить внутри компонента.
• Максимальное количество внутри поля – два компонента Button.
• Размеры встроенных кнопок выбираются на один шаг меньше размера компонента. Например, если используется размер S, то кнопка должна быть XS, если — M, то S, и так далее.
• Например, можно использовать для подтверждения действий, отправки сообщений или дополнительных фильтров внутри поля.

6. Произвольный контент (Additional)

• Является опциональным элементом и встраивается справа.
• Используется, если нужно добавить дополнительный текст внутри.
• Текст выравнивается по правому краю.
• Например, можно использовать для каунтера (счетчика введенных символов), когда нужно посчитать количество найденных значений в строке поиска или для единиц измерения.

7. Иконка ошибки (Error icon)

• Выводится только в состоянии Inline Error.
• Работает в паре с Tooltip с описанием ошибки при наведении на иконку, когда нужно сделать компактнее вид в форме.

8. Описание ошибки (Error description)

• Выводится только в состоянии Outline Error.
• Описание ошибки располагается слева внизу поля.

§Состояния

Имеет несколько состояний: Suggest, Default, Hover, Active, Disabled, Inline Error и Outline Error.

1. Suggest — неактивное состояние, когда нет прямого взаимодействия с компонентом и в нем еще нет введенных данных. В таком состоянии значение может подсказывать, что это поле нужно заполнить, и являться подсказкой (хинтом).
2. Default — неактивное состояние, когда нет прямого взаимодействия с компонентом и в нем уже есть введенные данные. В таком состоянии значение подсказки (хинт) меняется на то, что введено было пользователем.
3. Hover — активное состояние, когда курсор наводится на область компонента.
4. Active — активное состояние, вызываемое переходом от предыдущего компонента или намеренным кликом курсором на него. Состояние сбрасывается, если происходит переход на другой компонент или клик курсором на пустое место.
5. Disabled — неактивное состояние компонента, когда нет возможности с ним взаимодействовать.
6. Outline error — активное состояние компонента, когда происходит ошибка при валидации, которая отображается внизу поля с пояснением.
7. Inline error — активное состояние компонента, когда происходит ошибка при валидации поля, но сама ошибка не выводится, а отображается специальная иконка, при наведении на которую появляется тултип с ошибкой.

§Размеры

Существует 4 размера компонента: S, M, L, и XL.

В зависимости от размера у компонента меняется высота и скругления углов полей, а также отступы внутри поля и размер текста.

Радиусы скругления зависят от размера и задаются переменными.

1. S (-g-border-radius-s: 5px;) — используются там, где стандартный инпут слишком велик (таблицы, небольшие карточки).
2. M (-g-border-radius-m: 6px;) — основной размер, используется в большинстве форм и фильтрах.
3. L (-g-border-radius-l: 8px;) — используется для поиска (например, поиск по сервису).
4. ХL (-g-border-radius-xl: 10px;) — используется в коммуникационной среде (например, на сайте и лендингах).

§Рекомендации по использованию

1. Работа с полем

• Поле может содержать только одну строку. Для этой цели подойдет компонент для многострочного ввода текста — TextArea.
• Не рекомендуется помещать подсказку (хинт) внутрь поля, так как при вводе значения имени поля будет не видно. Так можно делать только в исключительных случаях, когда нужно сэкономить место или предназначение поля очевидно.
• Ширина поля должна соответствовать ширине вводимого значения. Это подсказывает пользователю, какое значение от него ожидают.
• Используйте один размер с другими комплементарными компонентами в форме. Если вы выбрали для работы M, другие компоненты должны быть такого же размера.

2. Внешний заголовок поля

• Краткое название поля (желательно не больше одной строки).
• В десктопных формах компонент должен быть расположен в одну строку со значением поля, за исключением мобильного контекста или диалогов размера S, где заголовок размещается сверху компонента.

3. Подсказка с тултипом

• Инструкции по заполнению поля при наведении на иконку с вопросительным знаком.
• Используется при необходимости пояснить заголовок.
• Рекомендуется писать короткий текст (не более двух абзацев).

4. Дополнительное описание

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

5. Единицы измерения можно размещать:

• В текстовом описании поля, если позволяет место в форме.
• Внутри поля ввода, если есть потребность сократить описание.
• Справа от поля, если необходимо место под другие элементы внутри поля, например, кнопки или крестик очистки.