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

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

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

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

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

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

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

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

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

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

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

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

Когда курсор находится над выпадающим списком, то скролится список, а не страница.

Если список большой, показывайте сначала наиболее релевантные варианты.

При вводе символов список фильтруется. Первый пункт в списке подсвечивается.

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

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

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

Уже выбранные элементы не отображаются в выпадающем списке.

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

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

Если курсор был не над токеном, или поле получило фокус после нажатия Tab на клавиатуре — в поле ставится текстовый курсор, появляется чёрная рамка у поля, и список с подсказками.

Если в поле введено произвольное значение не из справочника и поле получило фокус после нажатия Tab на клавиатуре, введенное значение выделяется.

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

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

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

Цвета должны быть разные по оттенку, но близкие по насыщенности.

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

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

В режиме ввода токена клавиатура работает как в обычном поле — стрелки вправо и влево управляют перемещением текстового курсора между символами, а стрелки вверх и вниз перемещают выделение в выпадающем списке. Backspace стирает введенные символы.

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

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

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

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

Токен ведёт себя как комбобокс при получении фокуса: значение выделяется, открывается список с подсказками, прокрученный до выбранного значения.

В момент перехода в режим редактирования и обратно все остальные токены должны оставаться на своих местах.

Если во время ввода нового значения длина токена увеличивается, он сдвигает все идущие за ним токены, а если они не входят — переносит их на следующую строку.

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

Совсем огромный токен может занять несколько строк, сдвигая остальные.

Токен в этом случае тоже становится больше.

По нажатию на Enter или запятую текст снова становится токеном. Выделение остаётся на нем.

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

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

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

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