Поле с токенами Token

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

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

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

Виды полей

С выбором из справочника

Если в поле можно ввести только значения из справочника, и пользователь не может добавлять свои, то при вводе в поле появляются подсказки.

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

Без справочника

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

Комбинированный

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

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

Описание работы

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

После того, как пользователь начал вводить символы, список сокращается по мере поиска. До тех пор, пока введенный текст не соответствует формату, кнопка «Добавить» не появляется.

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

Если в справочнике нет элементов, удовлетворяющих поиску, отображается только один пункт — «Добавить».

Если значений много, то отображается только часть из них.

Размер поля

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

Маска

Чтобы упростить форматирование, можно использовать маску.

Цвет

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

Цвета генерируются автоматически, они разные по оттенку, но и близки по насыщенности.

Разделитель элементов

Введенный текст превращается в токен при нажатии Enter или при вводе разделителя. В общем случае в качестве разделителя используется запятая. Разделитель следует выбирать в зависимости от формата данных.

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

Работа с клавиатурой и выделение элементов

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

Когда пользователь нажимает Backspace, элемент сначала выделяется. Второе нажатие удаляет его.

Курсор перемещается между токенами, а не между буквами внутри него. В поле работают все те же горячие клавиши и клавиши-модификаторы, что и в обычном поле. Например, нажатие стрелок с зажатой клавишей Shift выделяют токены по одному, а Ctrl+A выделяет все сразу.

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

Валидация

Если текст не подходит по формату, то токен не формируется. В этом случае при потере фокуса валидируется все поле целиком.

После того, как пользователь исправит неправильно введенное значение, оно превратится в токен по нажатию Enter или добавлению разделителя.

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