Navigation · Content · Stable

Tabs

Переключение между связанными панелями контента. Три размера (SM/MD/LG), горизонтальная и вертикальная ориентация, иконки, бейджи. Реализует ARIA tablist pattern с клавиатурной навигацией стрелками и roving tabindex.

Размеры

SM 32px · MD 40px · LG 48px
Размер
Пример
SM — 32px
MD — 40px
LG — 48px
Размер
padding-x
gap
height
stroke
Описание
SM
8px
4px
32px
1.5
Компактный список вкладок
MD
10px
6px
40px
2
Стандартный размер по умолчанию
LG
12px
8px
48px
2
Увеличенный — заголовки страниц

Состояния

Default · Hover · Active · Disabled
Состояние
Default
Active
Описание
Default
Default: text-secondary. Active: text-primary + 2px stroke-high индикатор снизу
Hover
Hover: text-primary + nba-20 фон. Active при hover: без изменений фона
Disabled
—
text-disabled, pointer-events: none, не участвует в keyboard nav

В группе

2–4 вкладки · финансовый контекст
Детали сделки — 4 вкладки
Содержимое вкладки «Детали»…
Портфель — 2 вкладки

С иконками

icon left · MD

С бейджами

badge right · счётчики · статусы

Вертикальная ориентация

orientation="vertical" · индикатор справа
Содержимое панели «Детали»…

Без разделителя

showDivider=false

API

Tabs · TabItem · TabPanel
Tabs
Prop
Тип
Default
Описание
itemsreq
TabItem[]
—
Массив вкладок: { id, label, icon?, badge?, disabled? }.
defaultActiveId
string
first enabled
Начально активная вкладка (uncontrolled). Если не передан — первая не disabled.
activeId
string
—
Controlled-режим. Используется совместно с onChange.
size
'sm' | 'md' | 'lg'
'md'
Размер вкладок. SM — 32px, MD — 40px, LG — 48px.
orientation
'horizontal' | 'vertical'
'horizontal'
Ориентация tablist. Vertical — индикатор справа, для боковых панелей.
showDivider
boolean
true
Линия-разделитель под горизонтальным / справа от вертикального tablist. Использует общий компонент Divider (контраст Low, токен --ds-stroke-low).
buttonMore
boolean
true
Кнопка overflow «…» при переполнении (только horizontal). false — кнопка не показывается, лишние вкладки уходят в горизонтальный скролл.
onChange
(id: string) => void
—
Вызывается при смене вкладки. Получает id выбранной вкладки.
className
string
—
Дополнительный CSS-класс на корневой элемент.
TabItem
Поле
Тип
Default
Описание
idreq
string
—
Уникальный идентификатор. Используется в aria-controls и aria-labelledby.
labelreq
string
—
Текст вкладки.
icon
ReactNode
—
Иконка слева от текста. aria-hidden автоматически.
badge
ReactNode
—
Бейдж справа от текста. Счётчик или статусная метка.
disabled
boolean
false
Исключает вкладку из навигации и взаимодействия.
TabPanel
Prop
Тип
Default
Описание
tabIdreq
string
—
ID соответствующей вкладки. Совпадает с TabItem.id.
activeIdreq
string
—
ID активной вкладки. При несовпадении панель получает атрибут hidden.
uidreq
string
—
Уникальный префикс из useId() родительского Tabs. Формирует ARIA id.
children
ReactNode
—
Содержимое панели. Рендерится всегда, скрывается через hidden.
CSS-токены размеров
Токен
SM / MD / LG
Default
Описание
--ds-tab-{sm|md|lg}-label-lr
4px / 6px / 8px
—
Label wrapper padding-inline. Горизонтальный внутренний отступ обёртки текста вкладки.
--ds-tab-{sm|md|lg}-grp-gap
12px / 16px / 20px
—
Gap between list and overflow button. Отступ между tablist и кнопкой overflow (прокрутка).
--ds-tab-{sm|md|lg}-bdg-py
0px / 0px / 2px
—
Badge top-bottom padding. Вертикальный внутренний отступ бейджа внутри вкладки LG.

Доступность

WCAG 2.2 AA · ARIA tablist · Keyboard
ARIA

Разметка

  • Tablist: role="tablist" + aria-orientation
  • Вкладка: role="tab" + aria-selected + aria-controls
  • Панель: role="tabpanel" + aria-labelledby + hidden
  • Disabled: disabled + aria-disabled на кнопке
  • ID связей генерируются через useId() — корректны при SSR
Клавиатура

Навигация

  • Tab — вход в tablist на активную вкладку
  • ← / → — предыдущая / следующая (горизонтально)
  • ↑ / ↓ — предыдущая / следующая (вертикально)
  • Home / End — первая / последняя вкладка
  • Disabled-вкладки пропускаются при навигации стрелками
WCAG 2.2 AA

Контраст и размер

  • Touch target: SM ≥ 32px, MD ≥ 40px, LG ≥ 48px по высоте
  • Активная вкладка: text-primary — Lc ≥ 60 на page-bg (APCA)
  • Неактивная: text-secondary — Lc ≥ 45 на page-bg (APCA)
  • Индикатор stroke-high: не только цвет — размер 2px
  • Disabled: не интерактивный, отдельного порога контраста нет
Focus Ring

Фокус

  • Box-shadow 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • Roving tabindex: только активная вкладка tabIndex=0
  • При смене стрелкой — автофокус на новой вкладке
  • Скрывается при клике мышью (:focus-visible)

Работа с клавиатурой

Tab · ← → · ↑ ↓ · Home End
Клавиша
Действие
Tab
Вход в tablist (на активную вкладку). Повторный Tab — выход из tablist в следующий контрол или содержимое панели.
← →
Предыдущая / следующая вкладка в горизонтальном tablist. Цикличная навигация, disabled пропускаются.
↑ ↓
Предыдущая / следующая вкладка в вертикальном tablist. Цикличная навигация.
Home
Первая доступная (не disabled) вкладка.
End
Последняя доступная (не disabled) вкладка.

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

Когда · Чего избегать
Правила

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

  • Контент разделён на 2–8 логически связанных раздела
  • Пользователь переключается без потери контекста страницы
  • Все разделы равнозначны — нет явного «главного»
  • Детали сущности: обзор / история / документы / аналитика
  • Горизонтальные — при широком контейнере (≥ 400px)
  • Вертикальные — для боковых панелей навигации
Типичные ошибки

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

  • Больше 8 вкладок — используйте боковую навигацию или Select
  • Вложенные tabs-in-tabs — резко усложняют навигацию
  • Пошаговый wizard в вкладках — для этого используйте Steps
  • Одна вкладка — просто показывайте контент без обёртки
  • Tabs как фильтр больших данных — используйте ToggleGroup
  • Разделы с сильно разным объёмом — вызывают скачки высоты
Слишком много вкладок

Переполнение

Сожмите окно — при нехватке места появляется кнопка ⋯ · prop buttonMore

Когда вкладки не влезают по ширине контейнера, скрытые вкладки собираются под кнопкой Ghost ⋯. По клику открывается дропдаун со списком. Поведением управляет prop buttonMore (по умолчанию true): при false кнопка ⋯ не показывается, а лишние вкладки уходят в горизонтальный скролл.

State Explorer

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