Интерактивный элемент выбора и фильтрации. Работает только в группах — не заменяет кнопки, а позволяет быстро выбирать, снимать и переключать параметры прямо на поверхности интерфейса.
Варианты
2 стиля · 2 семантики · 3 размера
Chip / Soft
Atoms · Control
Stable
Бледный фон, текст и иконки в тон. Основной вариант. High Contrast при вложенности на сером фоне.
XS · SM · MDNeutral · AccentHigh Contrast
Chip / Outline
Atoms · Control
Stable
Только цветная обводка, прозрачный фон. Ненавязчивый вариант для дополнительных и второстепенных опций.
XS · SM · MDNeutral · Accent
Стили и семантики
Soft · Outline × Neutral · Accent
Стиль
Neutral
Accent (Info)
Soft
Outline
Active
Disabled
Состояния
Default · Hover · Active · Active-Hover · Disabled
Default — чипс доступен, не выбран
Hover — подсвечивает интерактивность. На сенсорных экранах отсутствует
Active — чипс выбран, галочка обязательна при множественном выборе
Active-Hover — наведение на выбранный чипс, подсказывает возможность снятия
Disabled — заблокирован, нет реакций на курсор. Крестик обычно скрывают
Размеры
XS · SM · MD
Параметр
XS — 24px
SM — 32px
MD — 40px
Default
С иконкой
Active
padding-x
6px · Squish 6:4
8px · Square 1:1
10px · Square 1:1
Применение
Таблицы, поля множественного выбора, плотные интерфейсы
Основной размер. Фильтры, выбор, тулбары
Разрежённые интерфейсы. Обязателен на мобильных
Слоты
Leading · Trailing · Badge · Leading + Trailing
Leading icon — тип, категория, контекст. Не ставить одновременно с аватаром
Контейнер ограничен — лишние чипсы скрываются в +N
По клику на +4 — выпадающий список скрытых чипсов
Если переноса строк нет — показывают 3–5 чипсов, остальные сворачиваются в «+N» или «Ещё N». По клику — выпадающий список. Каждый элемент в нём доступен для выбора.
High Contrast
Soft · Neutral · Badge · на сером фоне
Белая поверхность — Default
Чипс и Badge видны — HC не нужен
Серая поверхность — нужен HC
Чипс сливается → Badge сливается с чипсом тоже
Default — чипс и Badge сливаются:
High Contrast — чипс белый, Badge виден:
Badge/Soft/Neutral использует те же alpha-токены что и чипс — на сером фоне он сливается с заливкой чипса. HC-токен на чипсе даёт белый фон (Light mode) → Badge на белом фоне снова контрастен. Правило: одинаковая палитра у родителя и дочернего → проверяй оба.
Текст внутри чипса
Без глагола · 2 слова · без сокращений
Правило
✓ Правильно
✗ Неправильно
Без глагола
ПрименитьУдалить
Максимум 2 слова
Длинное название категории
Без сокращений
Просм.
Русский интерфейс
OKDoneReset
Обрезка текста
→ тултип при наведении с полным текстом
Крайний правый чипс в строке можно сжать до 5 символов. Все остальные — без сжатия.
Доступность и адаптивность
WCAG 2.2 · Touch target · Wrap
Перенос строк
Чипсы стоят в строку. Не помещаются — переносятся на следующую (flex-wrap). Работает на всех размерах.
Мобильные экраны
Только MD (40px) — минимальный touch target. XS и SM допустимы только в таблицах.
40px ✓
32px ✗
Обрезанный текст на тач
На сенсорных нет hover. Полный текст — по долгому тапу (long press tooltip).
Работа с клавиатурой
Tab · Enter · Space · ← → · Escape
Клавиша
Действие
Tab
Переход к следующему чипсу в группе. Из последнего — на следующий контрол страницы.
EnterSpace
Переключает выбор (вкл / выкл). Удаляет чипс если есть крестик. Открывает выпадающий список если есть шеврон.
←→
Навигация между чипсами в группе — к предыдущему / следующему.
Escape
Опционально. Закрывает выпадающий список, если чипс его открыл.
При удалении чипса — фокус переходит на соседний элемент. Фокус-кольцо: 2px solid, offset 1px, цвет var(--ds-info-800).
Правила использования
Когда · Как не надо
Правила
Когда использовать Chip
Фильтры в таблицах, списках, поиске
Поля множественного выбора — выбранные значения под инпутом
Единичный или множественный выбор (аналог Radio/Checkbox)
В single-select — обязателен чипс «Все» / «Любой»
В одной группе — все чипсы одного стиля, размера и структуры
На мобильных — только MD (40px), минимальный touch target
Типичные ошибки
Чего избегать
Chip как кнопка — для действий есть Button
Одиночный чипс вне группы — для одного тега есть Tag
Смешивать логику Radio и Checkbox в одной группе
Иконка слева и аватар одновременно — пользователь запутается
Длинный текст — максимум два слова (кроме имён, адресов, e-mail)
Разные размеры и стили в одной группе
СохранитьПрименить фильтр
State Explorer
Интерактивный тест состояний — переключай и смотри