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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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