Перейти к содержимому

CoreAutocomplete

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

Поле ввода с подсказками: пользователь начинает печатать и выбирает вариант из отфильтрованного списка вместо набора полного значения. Берите там, где значение должно совпадать с известным списком (город, тег, контрагент), но выпадающий список всех вариантов слишком велик. Поддерживает одиночный выбор и множественный — выбранные значения показываются чипами с удалением.

Технические детали: items — строки или пары value/label; фильтрация — contains-match по label без учёта регистра, уже выбранные скрываются из списка. multiple: true — модель массив value, чипы (CoreChip, removable, Backspace на пустом поле удаляет последний); одиночный режим — модель строка, ввод также пишется в модель. Нативный input с role="combobox" + aria-autocomplete="list", aria-expanded, aria-controls, aria-activedescendant; навигация стрелками ↑/↓, выбор Enter, закрытие Escape, автоскролл к активной опции (scrollIntoView); список открывается на фокусе и вводе. id генерируется через useId() (связка CoreFormGroup ↔ labelFor), described-by → aria-describedby (hint/error CoreFormGroup); текст ошибки — role="alert"; размеры size sm/md/lg; icon — иконка в начале поля. flow — градиентная анимированная рамка (цвета темы primary/secondary) и градиентный текст значения/плейсхолдера через зеркало поверх input.

страна (value): —

города (values): —

города flow (values): —