06 · Components · Stable

Chip

Интерактивный элемент выбора и фильтрации. Работает только в группах — не заменяет кнопки, а позволяет быстро выбирать, снимать и переключать параметры прямо на поверхности интерфейса.

Варианты

2 стиля · 2 семантики · 3 размера
Chip / Soft
Atoms · Control
Stable
Бледный фон, текст и иконки в тон. Основной вариант. High Contrast при вложенности на сером фоне.
XS · SM · MD Neutral · Accent High Contrast
Нейтральный Акцент Выбран
Chip / Outline
Atoms · Control
Stable
Только цветная обводка, прозрачный фон. Ненавязчивый вариант для дополнительных и второстепенных опций.
XS · SM · MD Neutral · Accent
Нейтральный Акцент Выбран

Стили и семантики

Soft · Outline × Neutral · Accent
Стиль
Neutral
Accent (Info)
Soft
Все статусы
Активные
Outline
Все статусы
Активные
Active
Выбран Выбран
Выбран Выбран
Disabled
Soft disabled Outline disabled

Состояния

Default · Hover · Active · Active-Hover · Disabled
Default — чипс доступен, не выбран
Все Входящие Непрочитанные С вложениями Срочные
Hover — подсвечивает интерактивность. На сенсорных экранах отсутствует
Входящие Непрочитанные С вложениями Срочные
Active — чипс выбран, галочка обязательна при множественном выборе
Непрочитанные С вложениями Срочные Важные
Active-Hover — наведение на выбранный чипс, подсказывает возможность снятия
Непрочитанные С вложениями Срочные
Disabled — заблокирован, нет реакций на курсор. Крестик обычно скрывают
Недоступен Заблокирован Outline disabled

Размеры

XS · SM · MD
Параметр
XS — 24px
SM — 32px
MD — 40px
Default
Фильтр XS
Фильтр SM
Фильтр MD
С иконкой
Категория
Категория
Категория
Active
Выбран
Выбран
Выбран
padding-x
6px · Squish 6:4
8px · Square 1:1
10px · Square 1:1
Применение
Таблицы, поля множественного выбора, плотные интерфейсы
Основной размер. Фильтры, выбор, тулбары
Разрежённые интерфейсы. Обязателен на мобильных

Слоты

Leading · Trailing · Badge · Leading + Trailing
Leading icon — тип, категория, контекст. Не ставить одновременно с аватаром
Иванов А. Электроника Москва Фильтр ivanov@co.ru
Trailing icon — крестик (удалить), шеврон (выпадающий список)
Нейтральный Электроника Период Outline
Badge — счётчик: сколько объектов после фильтрации
Все 12 Активные 5 Завершённые 3 Документы 48
Leading + Trailing — иконка-контекст и кнопка удаления одновременно
Иванов А. Москва Электроника

Группа чипсов

Single-select · Multi-select · Поле выбора · B2B контекст
Single-select — аналог Radiobutton. «Все» всегда включён по умолчанию
Все Новые В работе На проверке Завершённые
Multi-select — аналог Checkbox. Галочка у каждого выбранного
Электроника Одежда Книги Косметика Спорт Дом
Применённые фильтры — Removable chips с кнопкой «Сбросить всё»
Фильтры:
Москва Электроника Иванов А.
Сбросить всё
Поле множественного выбора — выбранные значения в строчку под инпутом
Москва Санкт-Петербург Казань Добавить город...
B2B контекст — фильтрация строк таблицы чипсами XS
Статус:
Все Активные Завершённые В ожидании
Договор
Сумма
Статус
Договор №1047-А ₽ 1 200 000 Активный
Договор №1048-Б ₽ 850 000 В ожидании

Переполнение группы

3–5 видимых · остальные → +N
Контейнер ограничен — лишние чипсы скрываются в +N
Входящие Непрочитанные Срочные +4
По клику на +4 — выпадающий список скрытых чипсов
Входящие Непрочитанные Срочные +4
С вложениями В работе На проверке Завершённые
Если переноса строк нет — показывают 3–5 чипсов, остальные сворачиваются в «+N» или «Ещё N». По клику — выпадающий список. Каждый элемент в нём доступен для выбора.

High Contrast

Soft · Neutral · Badge · на сером фоне
Белая поверхность — Default
Чипс и Badge видны — HC не нужен
Фильтр Все 12 Выбран 3
Серая поверхность — нужен HC
Чипс сливается → Badge сливается с чипсом тоже
Default — чипс и Badge сливаются:
Фильтр Все 12
High Contrast — чипс белый, Badge виден:
Фильтр Все 12

Badge/Soft/Neutral использует те же alpha-токены что и чипс — на сером фоне он сливается с заливкой чипса. HC-токен на чипсе даёт белый фон (Light mode) → Badge на белом фоне снова контрастен. Правило: одинаковая палитра у родителя и дочернего → проверяй оба.

Текст внутри чипса

Без глагола · 2 слова · без сокращений
Правило
✓ Правильно
✗ Неправильно
Без глагола
Непрочитанные Активные
Применить Удалить
Максимум 2 слова
Все письма ivanov@co.ru
Длинное название категории
Без сокращений
Просмотрено
Просм.
Русский интерфейс
Готово Сбросить
OK Done Reset
Обрезка текста
Непрочитанные сообщения → тултип при наведении с полным текстом
Крайний правый чипс в строке можно сжать до 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
Переход к следующему чипсу в группе. Из последнего — на следующий контрол страницы.
Enter Space
Переключает выбор (вкл / выкл). Удаляет чипс если есть крестик. Открывает выпадающий список если есть шеврон.
← →
Навигация между чипсами в группе — к предыдущему / следующему.
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

Интерактивный тест состояний — переключай и смотри