# Inputs

## <mark style="color:blue;">Общая информация</mark>

Инпуты (поля ввода) используются для для ввода с клавиатуры и иногда для вывода текстовой, либо числовой информации. Хорошим тоном будет использование автозавершения (автокомплит, autocomplete) вводимого текста и понятный плейсхолдер.

## <mark style="color:blue;">Анатомия</mark>

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FgA3QMLWKuuJMxWV1xygi%2FFrame%2023476864.png?alt=media&#x26;token=7c4e7842-c955-4ce0-8834-900ed5826c5f" alt=""><figcaption></figcaption></figure>

1. Label. Заголовок формы
2. Placeholder. Плейсхолдер
3. Description (optional). Текст пояснения / подсказки
4. Counter (optional). Счетчик кол-ва введённых данных
5. Right Icon set. Иконки справа (управляющий элемент)
6. Left Icon. Иконки слева (поясняющие иконки)
7. Input text. Введенные / выбранные данные
8. Indicator. Индикатор

### Заголовок (Label)

Название поля пишется с заглавной буквы. Называйте поле ввода существительным, указывающим что нужно ввести. Избегайте в названии слов «ваш», «введите» и подобных — они не несут смысла. Не ставьте двоеточие после названия: без него всё понятно, оно только создает лишний визуальный шум.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FitKvSNXL5Q2YNBoA8XYM%2FFrame%2023476866.png?alt=media&#x26;token=0b05aa8c-bc26-4eca-9b7f-f86675276da7" alt="" width="563"><figcaption></figcaption></figure>

Возможно использование без заголовка в случаях, когда контекст очевиден (например, поле поиска)

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FHNvkCtKmS7Z4XX43uzH7%2FFrame%2023476864.png?alt=media&#x26;token=f6eaf1de-b354-4da6-8c13-483d8ff14d2e" alt="" width="270"><figcaption></figcaption></figure>

### Плейсхолдер (Placeholder)

Плейсхолдер (от английского placeholder) — «местозаполнитель». Используйте плейсхолдер, чтобы подсказать пользователю формат вводимых данных. Плейсхолдер не должен подсказывать конкретное значение, которое нужно ввести в поле. Также не рекомендуется использовать плейсхолдер для указания формата структурированных значений, для этого есть поле с маской. Плейсхолдер виден всегда, до ввода первого символа.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F427zqqjXuVICOhGv2DKa%2FFrame%2023476864.png?alt=media&#x26;token=65ff2a8f-c2bd-4e2f-be23-3cdf6b2ed534" alt="" width="563"><figcaption></figcaption></figure>

Если вы предполагаете значение (как правило, наиболее часто используемое значение или значение по умолчанию) — то рекомендуется предзаполнить поле, пользователь сможет его отредактировать:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FRUjK7MF5Fs5DAQFQaxuF%2FFrame%2023476867.png?alt=media&#x26;token=bae07581-8cee-4fcf-84ba-cc7db7e94c24" alt="" width="563"><figcaption></figcaption></figure>

### Маска

Для указания формата структурированных значений рекомендуется использовать маску. 
Маски ввода помогают пользователю определить формат вводимых данных, тем самым - избежать ошибок.
Маска ввода появляется в состоянии Active.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FliL2KgGOjCXOmPQSs0IV%2FFrame%2023476864.png?alt=media&#x26;token=4965f4ca-f09c-4a8a-aefb-c7d60e83c7f1" alt="" width="405"><figcaption></figcaption></figure>

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

### Контент

Контент полей ввода может быть трёх типов: текст, число или чипс. В большинстве случаев текст вводится с клавиатуры, допускается обрезать до одного символа и трёх точек в случае нехватки места. Чипсы, преимущественно, выбираются из выпадающего списка. В отдельных случаях, может быть и создание чипсов/хештегов (Пример:Outlook с почтовыми ящиками в поле «отправить»).

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F5cxqvAu3XhwFXt9zqLxV%2FFrame%2023476864.png?alt=media&#x26;token=5b6f3480-d77c-41b2-9ab3-b812d989c116" alt=""><figcaption></figcaption></figure>

### Элементы управления

Элементы управления всегда располагаются в правой части инпута. Клик на них вызывает действие. Также у каждого поля существует основное действие, которое вызывается кликом в само поле, а не только в управляющий элемент. Например: В dropdown при клике в поле срабатывает выпадающее меню. В качестве элементов управления в полях ввода используются кнопки-иконки. От обычных кнопок они отличаются совпадением состояний Active и Hover. У каждой кнопки-иконки есть область клика. Ширина у неё всегда 24 пикселя, высота зависит от высоты поля. Подход непропорционального уменьшения зоны клика позволяет дать пользователю большую площадь для взаимодействия с элементом, что напрямую влияет на удобство.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fps6LQJ8nwcIYUxlKcHHr%2FFrame%2023476864.png?alt=media&#x26;token=b637e5c8-691a-402a-8170-a50ffe8181b0" alt="" width="405"><figcaption></figcaption></figure>

### Поведение кнопок-иконок

При наведении и клике кнопка-иконка меняет цвет.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FngGpbYD6Qz8dOwrle4la%2FFrame%2023476865.png?alt=media&#x26;token=2b42d8ec-4751-4798-a418-1a94d578bb62" alt="" width="373"><figcaption></figcaption></figure>

Частным случаем управляющего элемента является иконка очистки поля. Если пользователю нужно часто очищать поле и вводить новое значение — используйте для этого специальную иконку очистки:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fiv1Jz6qCojsJ85JwAJFr%2FFrame%2023476866.png?alt=media&#x26;token=a4b2a706-1f29-40ab-b402-38e1a892a90b" alt="" width="563"><figcaption></figcaption></figure>

Она появляется, когда в поле введен хотя бы 1 символ в состоянии Hover и Active. Исчезает, когда фокус находится вне поля. При клике на крестик фокус переходит в поле, введенное значение стирается, иконка удаления исчезает:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F8yZLamEXgHVnscP6hfrn%2FFrame%2023476867.png?alt=media&#x26;token=d32c01cc-995e-48c1-a9be-631594eb6edc" alt="" width="563"><figcaption></figcaption></figure>

### Поясняющие иконки

Иконки слева от текста — это пояснения к контексту, визуальная подсказка. Не забывайте, что иконки слева — это дополнительные опции, используйте их разумно, не перегружая интерфейс. Данные иконки - не кликабельны.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FA5u8eulpF5Lzr9EVGD98%2FFrame%2023476867.png?alt=media&#x26;token=180d9047-a800-4a94-ae42-df6787b21611" alt="" width="405"><figcaption></figcaption></figure>

### Звёздочка (Asterisk)

Обязательные для заполнения поля ввода отмечаются символом «\*», выводимым через пробел справа от названия поля.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FRMtk2h6rCcG4nlqKxynu%2FFrame%2023476867.png?alt=media&#x26;token=0c2b1552-6837-4f71-b4ae-9af53d343d37" alt="" width="405"><figcaption></figcaption></figure>

### Дескрипшн (Description, helper text)

Дескрипш - это вспомогательный текст под полем ввода. Используйте вспомогательный текст для поля ввода, когда требуется предоставить дополнительную информацию, которая поможет пользователю его заполнить, либо в случае ошибки. Вспомогательное описание не скрывается при вводе данных. Это необходимо учитывать в случаях, когда пользователь должен видеть подсказку при вводе. Его не следует использовать, если для подсказки достаточно плейсхолдера. Может использоваться вместе с каунтером. Такой способ наиболее эффективен в плане скорости сообщения пользователю, но “съедает” пространство, которое мы закладываем под подсказку.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fg3HzRpunpTnVSVT3irSZ%2FFrame%2023476867.png?alt=media&#x26;token=313c7aa6-b2c2-4094-b6dc-cc82ca16e936" alt="" width="405"><figcaption></figcaption></figure>

Место под подсказку должно быть заложено на этапе проектирования - не допустимо смещение контента под вывод сообщения.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FGsRk6b1RdExmrlFV0V5s%2FFrame%20234768%D1%8172.png?alt=media&#x26;token=cc8a56b1-3156-4354-9ce4-b1d99897190b" alt="" width="563"><figcaption></figcaption></figure>

### Каунтер (Counter)

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

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fxa7mNRozJxjN2i07V82D%2FFrame%2023476867.png?alt=media&#x26;token=52f96931-4a27-4c39-a638-93e03080a878" alt="" width="405"><figcaption></figcaption></figure>

### Индикация (Indicator)

Если нужно дать пользователю описание, а места для дескрипшена нет, то предлагается использовать индикатор в поле ввода. При наведении на иконку статуса появляется всплывающее сообщение (hint) об ошибке / рекомендациях по исправлению.

Используйте этот способ для оптимизации полезного пространства рабочей области.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F9B8KaYPPZMo3gvLmQEmP%2FFrame%2023476867.png?alt=media&#x26;token=b09a203d-e5a2-4552-8b8c-d7d66f305dc3" alt="" width="479"><figcaption></figcaption></figure>

## <mark style="color:blue;">Виды</mark>

С целью поддержания 2 паттернов пользовательского опыта в существующих системах, все формы ввода имеют 2 вида: Inner input — формы ввода с заголовком (label) внутри Outer input — формы ввода с заголовком (label) снаружи

Используйте один вид форм ввода в рамках приложения или семейства приложений.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FhwbuqmDVBEHIidP3CqK3%2FFrame%2023476867.png?alt=media&#x26;token=fa774b58-1f6d-489a-ac80-c4f229ab4b08" alt="" width="495"><figcaption></figcaption></figure>

## <mark style="color:blue;">Размеры</mark>

### Внешние размеры

Ширина инпутов зависит от задачи, разрешения монитора и требований, высота является постоянным значением и зависит от размера выбранного инпута. Размерный ряд инпутов зависит от вида. В Inner используется: L и M, а в Outer — L, M и S. Их высота не совпадает между собой в разных видах:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FXMmrcxGQVuSoK3yLOqh2%2FFrame%2023476867.png?alt=media&#x26;token=15713939-10bc-4eee-8c0a-a301a0296b8e" alt=""><figcaption></figcaption></figure>

Для вида Inner высота L — 44 px используется по умолчанию, а при необходимости (например нехватке места в панелях и шапках виджетов) используется M — 36 px. Для вида Outer основной высотой является M — 32 px. При нехватке места на экране используется S — 24 px. В отдельных случаях используют высоту L — 40 px.&#x20;

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

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FU1K9BrMDhyZOL09m8mZA%2FFrame%2083.png?alt=media&#x26;token=303fd659-ca34-4c04-ad70-06da69272e78" alt=""><figcaption></figcaption></figure>

#### Исключение

Так же в нашей ДС встречаются инпуты, имеющие нестандартную высоту, максимальный размер которой зависит от вида инпута. Инпуты Multiselect и Chips в виде Inner имеют не меняющуюся и максимальную высоту - 72px.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fo1SBsPTJhWA1QcJLqxhb%2Fimage.png?alt=media&#x26;token=d8f9318d-7320-444f-9729-a60a681546e1" alt=""><figcaption></figcaption></figure>

Так же в нашей ДС встречаются инпуты, имеющие нестандартную высоту, максимальный размер которой зависит от вида инпута. Инпуты Multiselect и Chips в виде Inner имеют не меняющуюся и максимальную высоту - 72px.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F5Rwhpk2ecsYihjIpILpu%2Fimage.png?alt=media&#x26;token=566da381-739a-49c2-a751-58ede973dbec" alt=""><figcaption></figcaption></figure>

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

L -- используется в контентной области виджета M & S -- в панели

## Типы

Существует 18 типов полей. Они различаются по применению. Тип поля следует выбирать в зависимости от задачи.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fsy5JmstltV55kbpylV74%2Fimage.png?alt=media&#x26;token=0c6c6f6d-d64b-4f38-aa7c-65c76ee0fa75" alt=""><figcaption></figcaption></figure>

## Состояния

Существует 4 основных состояния полей ввода:

* Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с полем
* Hover — при наведении курсора
* Active — в момент клика мышкой в поле
* Disable — неактивное (недоступное для изменения или заполнения). Также в этом состоянии отсутствуют элементы управления

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FyboEdiXPfiLrQAwMWb2P%2Fimage.png?alt=media&#x26;token=af69bf37-7e70-4663-a440-d22b72cd6dfa" alt=""><figcaption></figcaption></figure>

### Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора поля ввода с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default и Hover. Невозможен в состоянии Disabled.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FHhujEKegu6ufNz9lkF4I%2Fimage.png?alt=media&#x26;token=cbe572d6-a01c-4984-b744-24b18fda54b4" alt=""><figcaption></figcaption></figure>

## Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом. Если поля ввода располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →. При нажатии клавиши Enter, появляется курсор для ввода текста, на котором находится фокус.

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

## Статусы

Предусмотрены четыре варианта статусных состояний форм ввода. Смена статуса формы ввода происходит согласно принципам валидации форм:

{% tabs %}
{% tab title="Default" %}
Параметры можно посмотреть в состояниях.
{% endtab %}

{% tab title="Success" %}
Возможен только для заполненных форм и означает корректность введенных значений. Используйте этот статус только в тех ситуациях, когда пользователю необходимо дать обратную связь об успешном вводе данных. В остальных случаях используйте статус Default, чтобы избежать лишнего информационного и визуального шума.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FyzubUSQqAHMNHtVkTQAm%2Fimage.png?alt=media&#x26;token=5889d7be-217c-4a6e-921b-75907e6fbb9e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Warning" %}
Предупреждающий статус о том, что значение формы, вне зависимости от заполнения, может повлиять на отклик / работу / расчет системы. При этом, корректировка значений пользователем желательна, но не обязательна.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fs0xIDF2xwBa0xj5axkzw%2Fimage.png?alt=media&#x26;token=2f8090ca-179f-4597-ab5b-241d645349ff" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Untitled" %}
Ошибка, сообщение пользователю о том, что значение формы, вне зависимости от заполнения:&#x20;

* Критично для исполнения сценария, если поле не редактируемо и/или только для чтения
* Сценарий выполнить невозможно, так как обязательны ввод или корректировка введенных значений

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FJh8kuRsPAIzUTDZu2IOj%2Fimage.png?alt=media&#x26;token=e5219f69-df02-4e85-b2d2-de99ec9fa24c" alt=""><figcaption></figcaption></figure>

{% endtab %}
{% endtabs %}

## Цвета

The *disabled* attribute prevents any interaction with the element:

* The input will not have a tab stop.
* The input will not be focusable.
* The input value cannot be changed without JavaScript.
* The input cannot be submitted in a form.

The *readonly* attribute is similar, with a couple differences:

* The input **will** have a tab stop
* The input **will** be focusable.
* The input value cannot be changed without JavaScript.
* The input **can be** submitted in a form.