Горизонтальный набор сегментов для выбора одного из нескольких взаимоисключающих вариантов. Один сегмент всегда активен. Используется для фильтрации контента, переключения режимов и выбора категорий в рамках одного экрана — без раскрытия меню.
Варианты
Default · High Contrast
Select Control / Default
Forms · Control · SIZE_BASED
Stable
Серый контейнер с белым активным сегментом и тенью. Стандартный вариант для большинства интерфейсных задач.
SM · MD · LGТекст · Иконка · Badge2–5 сегментов
Select Control / High Contrast
Forms · Control · SIZE_BASED
Stable
Активный сегмент — Brand / Primary цвет. Для привлечения внимания пользователя к этому контролу.
SM · MD · LGАкцентный вариант
Содержимое сегмента
Текст · Иконка + Текст · Icon Only · Текст + Badge
Размер
Только текст
Иконка + текст
Icon Only
Текст + Badge
SM — 32px
MD — 40px
LG — 48px
Правило
1–2 слова, без глаголов, одинаковая часть речи во всей группе
Иконка слева. Один вариант содержимого для всех сегментов
Только очевидные иконки. Обязателен aria-label и tooltip
Числовой счётчик. Не смешивать с Icon Only
Состояния сегмента
Default · Hover · Active · Active-Hover · Disabled
Default — сегмент доступен, не выбран
Hover — наведение на невыбранный сегмент (показан статично)
Active — один сегмент всегда выбран, нельзя снять нажатием
Active-Hover — наведение на активный сегмент (первый)
Disabled — отдельный сегмент или вся группа
Один сегмент
Вся группа
Размеры
SM · MD · LG — три ступени
Параметр
SM — 32px
MD — 40px
LG — 48px
Только текст
Icon Only
Padding-x сегмента
6px
8px
10px
Радиус контейнера
8px
12px
12px
Радиус сегмента
6px
10px
10px
Иконка
16px · 1.5px stroke
20px · 2px stroke
24px · 2px stroke
Mobile
→ MD (40px)
без изменений
без изменений
Badge в сегменте
SC SM → Badge SM · SC MD/LG → Badge MD
Badge SM (h=16px) — только в SC SM
Badge MD (h=20px) — в SC MD и LG. Badge не растёт выше MD
B2B контекст
Период · Режим · Плотность · Фильтрация
Выбор периода в дашборде — самое частое применение
Выручка
График за неделю
Переключение режима отображения — таблица / карточки
Контрагенты
ООО «Промснаб»₽ 4 200 000
АО «ТехноГрупп»₽ 1 850 000
Плотность данных — High Contrast привлекает внимание к контролу
Отображение таблицы
Компактный вид таблицы
Фильтрация заявок с числовой индикацией (Badge)
Заявки
Заявка #1024 — На рассмотрении
Заявка #1023 — Одобрена
Правила использования
Когда · Чего избегать
Правила
Когда использовать SC
Выбор периода: День / Неделя / Месяц / Год
Переключение режима отображения данных
Выбор плотности: Компактный / Стандарт / Разряженный
Фильтрация с числовой индикацией через Badge
2–5 равнозначных вариантов, один всегда активен
Когда все варианты должны быть видны без раскрытия меню
Типичные ошибки
Чего избегать
Больше 5 сегментов — используйте Dropdown или Radio Buttons
Навигация между разделами страницы — используйте Tabs
Два взаимоисключающих состояния (да/нет) — используйте Switcher
Смешивать Icon Only с текстовыми сегментами в одной группе
SM на мобильных — минимум MD (40px) для touch target
Длинные метки (более 2–3 слов) без возможности сокращения
Слишком много сегментов (>5):
Select Control vs Toggle Group Button
Когда что выбирать
Select Control
Выбор значения / категории
Контекст: формы, дашборды, фильтры
Визуально: серый контейнер-«таблетка», выбранный сегмент всплывает на белом с тенью
Поддерживает Badge (числовые счётчики)
High Contrast для акцентирования на контроле
Пример: День / Неделя / Месяц, Список / Сетка
Toggle Group Button
Переключение режима / инструмента
Контекст: тулбары, панели редактора
Визуально: outline-контейнер, части edge-to-edge, разделены тонкими линиями
Поддерживает Badge (числовые счётчики)
Нет High Contrast — уже достаточно выразителен
Пример: Полужирный / Курсив / Подчёркнутый, выравнивание текста
Outline-контейнер + части без зазора между собой + активная часть тонируется фоном nb-100
Адаптивность и ширина сегментов
Mobile · Hug vs Full Width
Mobile
Поведение на мобильных
Группа работает горизонтально, не переносится по отдельным сегментам
SM недоступен на Mobile — минимум MD (40px touch target)
Если группа не помещается — замена на Dropdown или Radio Buttons
Равная ширина (flex:1) предпочтительна на мобильных
flex:1 — равные ширины на Mobile
Ширина сегментов
Hug и flex:1
По умолчанию — Hug: каждый сегмент по своему содержимому. Для визуального баланса применяйте flex:1 — сегменты займут равную ширину контейнера.
Hug (по умолчанию) — ширина по контенту
flex:1 — равная ширина сегментов
Работа с клавиатурой и доступность
ARIA Radiogroup · WCAG 2.2 AA
ARIA-паттерн
Контейнер: role="radiogroup" + aria-label
Каждый сегмент: role="radio" + aria-checked="true/false"
Disabled сегмент: aria-disabled="true"
Icon Only: aria-label на каждом сегменте + tooltip при наведении
Tab входит в группу — фокус на активный сегмент
Focus Ring
Отображается только при навигации клавиатурой. Контраст текста на Active-фоне — APCA Lc ≥ 60.
Default — Focus ring 2px Info / offset 1px
High Contrast — тот же focus ring
Клавиша
Действие
Tab
Вход в группу — фокус на активный сегмент; повторный Tab — на следующий контрол за пределами группы
→
Переход к следующему сегменту в группе
←
Переход к предыдущему сегменту в группе
Enter
Активировать сегмент с фокусом
Escape
Переход к следующему сегменту после текущего выбранного
Shift + Tab
Выйти из группы на предыдущий элемент страницы
State Explorer
Интерактивный тест состояний — переключай и смотри