07 · Components · Stable

Toggle Group Button

Компактная группа кнопок-переключателей. Single-select: всегда активна ровно одна часть. Решает задачу «выбрать один из N вариантов» прямо на поверхности интерфейса — без дропдауна, без лишних переходов.

Варианты

Secondary · Icon + Label · Icon Only · 4 размера
TGB / Secondary
Atoms · Control
Stable
Outline Neutral-Blue. Контейнер с обводкой 1px, части без зазоров. Квадратный инсет — как Button Icon Only.
SM · MD · LG Icon + Label · Icon Only SIZE_BASED · btn-* alias
TGB / Tertiary (Ghost)
Atoms · Control
Planned
Без внешней обводки контейнера. Для тулбаров редактора и встроенного переключателя в тёмном хедере.
В беклоге

Содержимое части

Icon + Label · Icon Only
Вариант
Icon + Label
Icon Only
SM — 32px
MD — 40px
Правило
Все части одной группы — одинаковый вариант. Нельзя смешивать
Только тулбары. Обязателен aria-label на каждой части

Состояния части

Default · Hover · Active · Active-Hover · Disabled
Default — часть доступна, не выбрана
Hover — средняя часть (показана статично)
Active — часть выбрана. Нельзя снять нажатием — активная часть всегда одна
Active-Hover — показывает что нажатие сохранит текущий выбор (показана 1-я часть)
Disabled — отдельная часть или вся группа недоступны
Одна часть
Вся группа

Размеры

SM · MD · LG — лестница Button
Параметр
SM — 32px
MD — 40px
LG — 48px
Icon + Label
Icon Only
Padding x = y
8px · Square
10px · Square
12px · Square
Иконка
16px · 1.5px
20px · 2px
24px · 2px
Mobile
→ MD (40px)
без изменений
без изменений

Badge в части

TGB SM → Badge SM · TGB MD/LG → Badge MD
Badge SM (h=16px) — только в TGB SM
Badge MD (h=20px) — в TGB MD и LG. Badge не растёт выше MD

High Contrast

Активный сегмент — Neutral Fill · .tgb-hc
Когда использовать

HC-вариант активного сегмента

Стандартный Active (--ds-nb-100) может недостаточно выделяться на серых или нейтральных поверхностях — например в шапке, боковой панели или карточке с фоном --ds-nb-50. Modifier .tgb-hc переключает активный сегмент на тёмный фон.

  • Active фон: var(--ds-neutral-fill)
  • Текст / иконка: var(--ds-text-invert)
  • Active-Hover: var(--ds-neutral-fill-hover)
  • Badge внутри — токены без изменений
Сравнение

Default vs High Contrast

Default — nb-100 active
High Contrast — neutral-fill active
HC + Badge вложен

B2B контекст

Вид списка · Период дашборда · Тулбар редактора
Переключение вида — список / сетка / таблица
Договоры
Договор №1047-А ₽ 1 200 000
Договор №1048-Б ₽ 850 000
Выбор периода в дашборде
Выручка
График за неделю
Тулбар редактора — форматирование Icon Only
Текст документа в режиме редактирования...

Правила использования

Когда · Как не надо
Правила

Когда использовать TGB

  • Переключение режима просмотра: Список / Сетка / Таблица
  • Выбор периода в графиках и дашбордах
  • Тулбары редактора — форматирование текста (Icon Only)
  • 2–5 равнозначных вариантов по частоте использования
  • Все части одного размера и одного варианта содержимого
  • Одна часть всегда активна — нельзя снять все
Типичные ошибки

Чего избегать

  • Больше 5 вариантов — используйте Tabs или Select
  • Варианты разны по важности — отдельные Button с иерархией
  • Множественный выбор — для этого есть Chip
  • Навигация между страницами — используйте Tabs
  • Смешивать Icon Only и Icon + Label в одной группе
  • SM на мобильных — минимум MD (40px) для touch target
Слишком много частей (>5):

Группировка

Состав · Ширина частей
Правила группы

Состав и ограничения

  • От 2 до 5 частей. Более 5 вариантов — замените на Tabs или Select
  • Один размер на группу. Нельзя смешивать SM/MD/LG внутри одной группы
  • Один вариант содержимого. Все части — либо Icon + Label, либо Icon Only
  • Одна часть всегда активна. Нельзя снять выбор со всех частей одновременно
Ширина частей

Hug и flex:1

По умолчанию части имеют ширину Hug (по содержимому). Для визуального баланса рекомендуется делать все части одинаковой ширины — применяйте flex: 1 на каждую часть.

Hug (по умолчанию)
flex: 1 — равная ширина

Адаптивность

Mobile · Touch
Mobile

Поведение на мобильных

  • Группа работает горизонтально на мобильных устройствах
  • Если вся группа не помещается в контейнер — переносите блок целиком на следующую строку (не разбивайте части по разным строкам)
  • SM-размер недоступен на Mobile — минимум MD (40px touch target)
  • Вертикальная группа возможна в тулбарах, но это нестандартный паттерн
MD — минимальный размер на Mobile
Запрещено на Mobile

Чего не делать

  • SM-размер (32px) — touch target слишком мал
  • Разбивать части группы по разным строкам — группа переносится только целиком
  • Горизонтальный скролл внутри группы — пользователь не видит все варианты
SM недоступен на Mobile

Работа с клавиатурой и доступность

ARIA Radiogroup · WCAG 2.2 AA

ARIA-паттерн

  • Контейнер группы: role="group" + aria-label
  • Каждая часть: role="radio" + aria-checked="true/false"
  • Disabled часть: aria-disabled="true"
  • Навигация стрелками (не Tab) — стандарт ARIA Radiogroup Pattern

Focus Ring

Focus ring обязателен на активной части при навигации клавиатурой. Контраст текста и иконки на Active-фоне — APCA Lc ≥ 60.

Focus ring 2px Info / offset 1px
Клавиша
Действие
Tab
Фокус на группу целиком (на активную часть)
→ / ↓
Следующая часть группы
← / ↑
Предыдущая часть группы
Home
Первая часть группы
End
Последняя часть группы
Space / Enter
Активировать часть с фокусом
Shift + Tab
Выйти из группы (на предыдущий элемент)

State Explorer

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