Tag Input

Tag Input принимает произвольные метки без справочника: набранный текст фиксируется чипом внутри поля, крестик чипа и Backspace убирают лишнее. Поле повторяет хром Input, чипы — Tag; в ADMY это tagger и tagger__tag.

Статус: experimental · в системе с 2026-08 · интерактивность: always (всегда)

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

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

Не использовать:

Значения берутся из закрытого списка — используй Multi Select.
Метки уже готовы и не вводятся — покажи их через Tag.
Нужно одно свободное значение — используй Input.

Альтернативы:

multi-select — несколько значений из закрытого списка вариантов
tag — готовые метки без ввода
input — одно свободное значение

Базовый

Хэштеги креатива: Enter или запятая фиксируют метку, крестик и Backspace убирают.

Хэштеги

sale

summer

<!--
  🟢

  Базовый пример Tag Input собирает хэштеги креатива прямо в поле. Enter или
  запятая фиксируют метку, крестик и Backspace на пустом вводе убирают её.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import TagInput from "$lib/ui/TagInput.svelte";

let hashtags = $state(["sale", "summer"]);
</script>

<div style="width: 100%;">
	<TagInput label={t("Хэштеги")} placeholder={t("Enter или запятая")} bind:value={hashtags} />
</div>

Поле

Подпись, подсказка, описание, обязательность и ошибка — как у Input.

Ключевые слова

Слова уйдут в форму отдельными значениями.

Домены

example.com

Домен example.com уже в чёрном списке.

<!--
  🟢

  Пример поля Tag Input показывает служебные части формы: подсказку,
  обязательность, описание и ошибку. Сообщения относятся ко всему набору,
  а не к отдельной метке.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import TagInput from "$lib/ui/TagInput.svelte";

let keywords = $state([]);
let domains = $state(["example.com"]);
</script>

<div style="display: grid; gap: var(--sp-3); width: 100%;">
	<TagInput
		label={t("Ключевые слова")}
		hint={t("Enter или запятая добавляют слово")}
		description={t("Слова уйдут в форму отдельными значениями.")}
		name="keywords"
		required
		bind:value={keywords}
	/>
	<TagInput
		label={t("Домены")}
		error={t("Домен example.com уже в чёрном списке.")}
		bind:value={domains}
	/>
</div>

Предел

max=3: третья метка прячет строку ввода, удаление возвращает её.

Источники

news

video

Не больше трёх.

<!--
  🟢

  Пример предела показывает Tag Input с max=3: третья метка прячет строку
  ввода, поле остаётся доступным, а удаление любой метки возвращает ввод.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import TagInput from "$lib/ui/TagInput.svelte";

let sources = $state(["news", "video"]);
</script>

<div style="width: 100%;">
	<TagInput
		label={t("Источники")}
		description={t("Не больше трёх.")}
		max={3}
		bind:value={sources}
	/>
</div>

Только чтение

Набор виден, но не правится: без крестиков и строки ввода.

Метки кампании

retargeting

lookalike

brand

<!--
  🟢

  Пример только для чтения показывает готовый набор меток без крестиков и
  строки ввода: набор виден, но не правится.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import TagInput from "$lib/ui/TagInput.svelte";
</script>

<div style="width: 100%;">
	<TagInput label={t("Метки кампании")} readonly value={["retargeting", "lookalike", "brand"]} />
</div>

Вставка списком

bulk: кнопка со значком списка добавляет метки по строке из диалога.

Метки

утм

ретаргетинг

<!--
  🟢

  Вставка меток списком (эталон: Vue-легаси tagger с модалкой
  entitiesList): кнопка со значком списка открывает диалог, каждая строка
  становится меткой, дубли отбрасываются.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import TagInput from "$lib/ui/TagInput.svelte";

let value = $state([t("утм"), t("ретаргетинг")]);
</script>

<div style="width: 360px;">
	<TagInput label={t("Метки")} bind:value bulk bulkTitle={t("Метки списком")} />
</div>