Поле поиска с иконкой лупы и кнопкой очистки. Два варианта: LabelOut (внешняя метка, SM–XL) и LabelIn (плавающая метка, MD–LG). Новых токенов не требует — использует существующие --ds-input-* и --ds-field-in-*.
LabelOut — состояния
search icon · validation
Некорректный запрос
Найдено 12 контрагентов
Введите не менее 2 символов
Минимум 3 символа
LabelOut — размеры
SM · MD · LG · XL
LabelIn — состояния
плавающая метка · search icon
Некорректный запрос
Введите не менее 2 символов
Найдено 3 результата
Тёмная тема
Переключи тему кнопкой в шапке
Некорректный запрос
Доступность
WCAG 2.2 AA · APCA · ARIA · Keyboard
ARIA
Разметка
Поле поиска — role="searchbox" на <input> (или нативная роль searchbox)
Метка через <label> с for/id либо aria-label (например «Поиск контрагента»)
Кнопка очистки — <button type="button"> с aria-label="Очистить"
Иконка лупы декоративна → aria-hidden="true"
При ошибке: aria-invalid="true" + aria-describedby → id caption
Технически реализовано на type="text" + inputmode, не на нативном type="search" — нативный тип добавляет собственный крестик × поверх компонентного (двойной ×)
Клавиатура
Навигация
Tab — фокус на поле; повторный Tab — на кнопку очистки (если она видима), затем дальше
Ввод текста — фильтрация / запрос (типичное поведение поиска)
Esc — очистить или сбросить запрос (типично для поиска)
Enter — выполнить поиск, если он не мгновенный (по необходимости)
Индикатор фокуса виден только при навигации с клавиатуры
WCAG 2.2 AA · APCA
Контраст и размер
Текст ввода и метка: APCA Lc ≥ 60 против фона поля
Иконка лупы / крестик: APCA Lc ≥ 45 (UI-элементы)
Touch target поля и кнопки очистки ≥ 24×24px
Состояние ошибки: рамка 2px --ds-neg-default — не только цвет (WCAG 1.4.1)
В тёмной теме текст caption / иконки валидации — --ds-neg-500 / --ds-pos-500 / --ds-warn-700
Focus Ring
Фокус
Активное поле: рамка 2px через box-shadow: inset (--ds-stroke-high)
Кнопка очистки при фокусе — outline 2px, цвет --ds-info-800 (#5475F8)
Offset 1px — кольцо видно на любом фоне
Виден при навигации с клавиатуры (:focus-visible)
Скрывается при клике мышью — не мешает визуально
Работа с клавиатурой
Tab · ввод · Esc · Enter
Клавиша
Действие
Tab
Фокус на поле поиска. Повторный Tab — на кнопку очистки (если видима), затем на следующий контрол.
A–Я0–9
Ввод текста запроса — фильтрация списка или таблицы. Появляется кнопка очистки.
Esc
Очистить поле / сбросить запрос (типичное поведение поиска).
Enter
Выполнить поиск, если он не мгновенный (по необходимости). При мгновенной фильтрации — без эффекта.
Поведение Esc и Enter — типичные конвенции для поля поиска, не фиксированные правила спеки InputSearch (отдельной спеки нет — поле наследует базовый Input). Индикатор фокуса появляется только при навигации с клавиатуры.
Правила использования
Когда · Чего избегать
Правила
Когда использовать поиск
Фильтрация длинных списков и таблиц — поиск по названию, ИНН, тикеру
Большие наборы данных, где прокрутка медленнее ввода запроса
Поиск по справочникам — контрагенты, инструменты, документы
Глобальный поиск по разделу или приложению
Размещайте поле над фильтруемым контентом; иконка лупы слева
Чего избегать
Когда НЕ использовать
Короткий список (до ~7 элементов) — поиск избыточен, видно всё сразу
Выбор одного значения из фиксированного набора — используйте Select
Выбор нескольких значений из набора — используйте Multiselect
Свободный ввод текста без функции поиска — обычный Input
Многострочный ввод — используйте TextArea
Выбор из фикс. списка → Select
Если значения известны заранее и их немного, поле поиска вводит в заблуждение — переключитесь на Select.