Input Tags

Input Tags - компонент для ввода и управления несколькими тегами. Идеально подходит для создания списков навыков, категорий, ключевых слов и других мультизначных полей.

По умолчанию теги отображаются под полем ввода

Варианты отображения

Inside Variant

Теги могут отображаться внутри поля ввода, используя свойство variant="inside".

Примечание: В режиме inside теги размещаются внутри поля ввода и автоматически увеличивают его высоту при добавлении нескольких рядов тегов.

Основные возможности

Controlled

Вы можете контролировать значение тегов используя свойства tags и onTagsChange.

Disabled

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

Max Tags

Ограничьте максимальное количество тегов с помощью свойства maxTags.

No Duplicates

Запретите дублирование тегов используя allowDuplicates={false}. Вы можете обработать попытку добавления дубликата через коллбэк onDuplicateAttempt.

Sizes

Input Tags поддерживает три размера: sm, md (по умолчанию) и lg.

Colors

Input Tags поддерживает различные цветовые темы из HeroUI.

Variants

Input Tags поддерживает все варианты стилей из HeroUI Input через свойство inputVariant.

With Label & Description

Добавьте label и описание для лучшего UX.

With Validation

Используйте валидацию совместно со свойствами isInvalid и errorMessage.

Управление тегами

Добавление тегов

Теги можно добавлять несколькими способами:

Нажатием клавиши Enter (по умолчанию)
Добавлением пользовательских разделителей через свойство separators
Запятой, если она добавлена в массив разделителей

Удаление тегов

Нажатием на иконку × на теге
Клавишей Backspace когда поле ввода пустое (удаляется последний тег)

Свойства

InputTags Props

Атрибут	Тип	Описание	По умолчанию
variant	`"outside" \| "inside"`	Режим отображения тегов (под инпутом или внутри)	`"outside"`
tags	`string[]`	Массив тегов (для контролируемого компонента)	`undefined`
onTagsChange	`(tags: string[]) => void`	Коллбэк при изменении тегов	-
maxTags	`number`	Максимальное количество тегов	`undefined`
separators	`string[]`	Массив клавиш-разделителей для добавления тегов	`["Enter"]`
allowDuplicates	`boolean`	Разрешить дублирование тегов	`true`
onDuplicateAttempt	`(tag: string) => void`	Коллбэк при попытке добавить дубликат	-
inputVariant	`"flat" \| "bordered" \| "faded" \| "underlined"`	Вариант стиля инпута из HeroUI	`"flat"`

Наследуемые свойства Input

Input Tags наследует все свойства от HeroUI Input компонента, кроме value, onChange и variant:

label: Label для поля
placeholder: Placeholder текст
description: Описание под полем
errorMessage: Сообщение об ошибке
isInvalid: Флаг невалидного состояния
isDisabled: Флаг отключенного состояния
isReadOnly: Флаг только для чтения
isRequired: Флаг обязательного поля
labelPlacement: Позиция label (inside, outside, outside-left)
size: Размер компонента (sm, md, lg)
color: Цвет темы
radius: Радиус скругления
И другие свойства из Input API

Slots

Input Tags использует slots от базового Input компонента:

base: Обертка компонента
label: Label элемент
mainWrapper: Обертка когда label находится outside/outside-left
inputWrapper: Обертка для input и тегов
innerWrapper: Внутренняя обертка для содержимого
input: Поле ввода
helperWrapper: Обертка для description и errorMessage
description: Описание
errorMessage: Сообщение об ошибке

Data Attributes

Input Tags имеет следующие data-атрибуты на элементе base:

data-invalid: Когда поле невалидно (основано на isInvalid)
data-required: Когда поле обязательно (основано на isRequired)
data-readonly: Когда поле только для чтения (основано на isReadOnly)
data-disabled: Когда поле отключено (основано на isDisabled)
data-hover: При наведении курсора
data-focus: При фокусе
data-focus-within: При фокусе на элементе или его дочерних элементах
data-focus-visible: При фокусе с клавиатуры

Input Tags построен на основе HeroUI Input с полной поддержкой доступности
Поддерживает навигацию с клавиатуры
Каждый тег можно удалить через клавишу Backspace
Label корректно связаны с полем ввода
Поддерживает ARIA атрибуты для скрин-ридеров