Элементы

Ввод меток

Несколько значений метками в одном поле: добавление Enter или запятой, удаление Backspace, значения в скрытом поле.

tag-input с версии 0.1.0 со скриптом

Примеры

Приглашение участников

<form action="#" method="post">
  <div class="field">
    <label class="field__label" for="tg-emails">Кого пригласить</label>
    <div class="tag-input" data-ui-tags data-ui-max="20">
      <ul class="tag-input__list" aria-label="Приглашённые">
        <li class="tag-input__item"><span class="tag-input__text">anna@example.com</span><button class="tag-input__remove" type="button" aria-label="Удалить anna@example.com">×</button></li>
        <li class="tag-input__item"><span class="tag-input__text">ivan@example.com</span><button class="tag-input__remove" type="button" aria-label="Удалить ivan@example.com">×</button></li>
      </ul>
      <input class="tag-input__input" type="email" id="tg-emails" autocomplete="off" placeholder="name@example.com" aria-describedby="tg-emails-h" data-ui-error="Укажите e-mail в формате name@example.com">
      <input type="hidden" name="emails" value="anna@example.com,ivan@example.com">
    </div>
    <p class="tag-input__status" role="status" hidden></p>
    <p class="field__hint" id="tg-emails-h">Enter или запятая добавляют адрес, Backspace удаляет последний. Адреса можно вставить списком.</p>
    <span class="tag-input__live visually-hidden" role="status"></span>
  </div>
</form>

Темы встречи

Теги

<div class="field">
  <label class="field__label" for="tg-topics">Теги</label>
  <div class="tag-input" data-ui-tags data-ui-max="5">
    <ul class="tag-input__list" aria-label="Теги"></ul>
    <input class="tag-input__input" type="text" id="tg-topics" maxlength="24" autocomplete="off" placeholder="Например, релиз">
    <input type="hidden" name="tag-input" value="">
  </div>
  <p class="tag-input__status" role="status" hidden></p>
  <span class="tag-input__live visually-hidden" role="status"></span>
</div>

Установка

bukatchuk-ui add tag-input

Вместе с компонентом установятся: tokens, fonts, base, core, field.

Файлы

Файл	Назначение
`tag-input.css`	стили
`tag-input.js`	скрипт
`example.html`	образец разметки, в проект не копируется
`tag-input.jinja.html`	вставка для Jinja

Клавиши

Клавиша	Действие
`Enter / ,`	добавить значение в метки
`Backspace`	в пустом поле удалить последнюю метку
`Esc`	очистить введённый текст
`Tab`	перейти к кнопкам удаления меток
`Enter / Space на «×»`	удалить метку

Макрос для Jinja

{#- Ввод значений метками. values — уже добавленные значения; type='email' включает проверку адресов;
    max — предел числа меток. Значения уходят в скрытом поле name через запятую; нужен скрипт tag-input. -#}
{% macro tag_input(name, label, values=[], type='text', placeholder='', max=None, hint=None, error=None, id=None) -%}
{%- set tid = id or ('tg-' ~ name) -%}
<div class="field">
  <label class="field__label" for="{{ tid }}">{{ label }}</label>
  <div class="tag-input" data-ui-tags{% if max %} data-ui-max="{{ max }}"{% endif %}>
    <ul class="tag-input__list" aria-label="{{ label }}">
      {%- for v in values %}
      <li class="tag-input__item"><span class="tag-input__text">{{ v }}</span><button class="tag-input__remove" type="button" aria-label="Удалить {{ v }}">×</button></li>
      {%- endfor %}
    </ul>
    <input class="tag-input__input" type="{{ type }}" id="{{ tid }}" autocomplete="off"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if hint %} aria-describedby="{{ tid }}-h"{% endif %}{% if error %} data-ui-error="{{ error }}"{% endif %}>
    <input type="hidden" name="{{ name }}" value="{{ values|join(',') }}">
  </div>
  <p class="tag-input__status" role="status" hidden></p>
  {%- if hint %}
  <p class="field__hint" id="{{ tid }}-h">{{ hint }}</p>
  {%- endif %}
  <span class="tag-input__live visually-hidden" role="status"></span>
</div>
{%- endmacro %}