InputTags
Базовый
Теги: vue, nuxt
Размеры
Состояния и ограничения
Входные параметры
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
placeholder | string | 'Введите тег и нажмите Enter' | Подсказка в поле добавления тега. |
size | 'sm' | 'md' | 'lg' | undefined | Размер поля. Если не задан, берётся из C3FormField. |
disabled | boolean | false | Отключает ввод и удаление тегов. |
error | boolean | false | Флаг ошибки. |
name | string | undefined | Имя поля. |
max | number | undefined | Максимальное количество тегов. |
v-model привязывает массив тегов через defineModel<string[]>({ default: () => [] }).
Описание
Компонент C3InputTags — поле ввода тегов. Тег добавляется по нажатию Enter или запятой, либо по потере фокуса. Удаляется крестиком на теге или клавишей Backspace в пустом поле.
Используйте max для ограничения количества тегов. Дубликаты и пустые значения игнорируются.
Дополнительная информация
- Слоты отсутствуют.
- Плейсхолдер показывается только когда список тегов пуст.
- Кнопка удаления тега несёт
aria-label«Удалить тег {tag}». - Клик по области поля переводит фокус на input.
- Компонент интегрируется с
C3FormField: берёт ошибку из контекста и регистрирует геттер значения для валидации.