Вкладки

Вкладки переключают разделы содержимого на месте, по одному разделу за раз.

Стабильный

Figma

Обзор

Использование

API

Доступность

Overview

Activity

Members

Billing

<tk-tab-bar label="Project" value="overview">
  <tk-tab value="overview">Overview</tk-tab>
  <tk-tab value="activity">Activity</tk-tab>
  <tk-tab value="members">Members</tk-tab>
  <tk-tab value="billing" disabled>Billing</tk-tab>
</tk-tab-bar>

Анатомия

Часть	Что это
`tk-tab-bar`	ряд вкладок на тонкой линии во всю ширину; одна остановка Tab
`tk-tab`	одна вкладка высотой 40px
подчёркивание	линия 2px под выбранной вкладкой
панель	ваш собственный элемент, который показывается для выбранной вкладки

Панели

Вкладки рисует компонент, а панели — ваши собственные элементы. Для каждой панели:

задайте вкладке id и panel с id панели;
задайте панели role="tabpanel", aria-labelledby с id вкладки и tabindex="0";
когда приходит change, показывайте выбранную панель и прячьте остальные.

<tk-tab-bar id="settings-tabs" label="Settings" value="profile">
  <tk-tab id="tab-profile" value="profile" panel="panel-profile">Profile</tk-tab>
  <tk-tab id="tab-alerts" value="alerts" panel="panel-alerts">Notifications</tk-tab>
</tk-tab-bar>
<div id="panel-profile" role="tabpanel" aria-labelledby="tab-profile" tabindex="0">Your name and photo</div>
<div id="panel-alerts" role="tabpanel" aria-labelledby="tab-alerts" tabindex="0" hidden>Email and push alerts</div>
<script>
  const tabs = document.getElementById('settings-tabs');
  tabs.addEventListener('change', () => {
    for (const tab of tabs.querySelectorAll('tk-tab'))
      document.getElementById(tab.panel).hidden = tab.value !== tabs.value;
  });
</script>

Содержимое может менять и роутер. В любом случае показывайте новую панель сразу: переход фокуса между вкладками их выбирает.

Форма

shape="round" делает подложку под вкладкой при наведении и нажатии полностью скруглённой. Подчёркивание не меняется.

This week

This month

This year

<tk-tab-bar label="Reports" value="week" shape="round">
  <tk-tab value="week">This week</tk-tab>
  <tk-tab value="month">This month</tk-tab>
  <tk-tab value="year">This year</tk-tab>
</tk-tab-bar>

Состояния

При наведении подпись темнеет и появляется подложка, при нажатии подложка та же, при фокусе с клавиатуры — рамка. У выбранной вкладки тёмная подпись и подчёркивание.

disabled у вкладки: она приглушена, не нажимается, и клавиатура её пропускает. Где-нибудь рядом объясните, почему раздел недоступен.

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

Вкладки переключают разделы с разным содержимым на одной странице, например профиль, уведомления и оплату.
Чтобы менять вид одного и того же содержимого, например список или сетку, берите Segmented control.
Чтобы перейти на другую страницу, берите Navigation menu или Sidebar.
Для значения, которое отправляет форма, берите Radio group, а для действий — Menu.

Текст

Одно-два слова на вкладку, заглавная буква только в начале: «Обзор», «Активность».
Подписи в одной форме: все существительные, а не «Обзор» рядом с «Смотреть всю активность».
Не пишите на вкладках счётчики.
Задайте label, который называет набор разделов, например «Настройки».

Можно / нельзя

✅ Можно	❌ Нельзя
Переключать разделы содержимого	Менять вид одного содержимого: для этого segmented control
Одно-два слова в одной форме	Целое предложение на вкладке
`role="tabpanel"` у каждой панели	Панели без связи со вкладками
Слушать `change` на ряде	Вешать обработчик клика на каждую вкладку
Показывать новую панель сразу	Долго грузить панель, пока фокус идёт по вкладкам

Segmented control: меняет вид одного содержимого.
Navigation menu: переход на другую страницу.
Page header: вкладки часто стоят внизу шапки страницы; у них своя линия, поэтому разделитель над ними не нужен.

API

`tk-tab-bar`

Атрибут	Тип	По умолчанию	Что делает
`value`	string	`''`	`value` выбранной вкладки; обновляется, когда вкладку выбирают
`label`	string	—	доступное имя списка вкладок; обязателен
`shape`	`rect` \| `round`	`rect`	подложка под вкладкой: скруглённые углы или полностью скруглённые края

Слот	Содержимое
по умолчанию	элементы `tk-tab`

`tk-tab`

Атрибут	Тип	По умолчанию	Что делает
`value`	string	`''`	идентификатор вкладки; обязателен
`panel`	string	—	`id` панели, которую показывает вкладка; задаёт `aria-controls`
`disabled`	boolean	`false`	приглушена, не нажимается, клавиатура её пропускает

Слот	Содержимое
по умолчанию	подпись

Вкладка без id получает сгенерированный.

События

change приходит от tk-tab-bar, когда выбирают другую вкладку. Новое значение читайте из value. Событие не приходит, если value задан в коде.

Токены

Часть	Токены
вкладка	`text/secondary`, Label Medium (14/20)
вкладка, наведение	`text/default` + `state/hover`
вкладка, нажатие	`state/press`
выбранная вкладка	`text/default` + подчёркивание 2px `border/selected`
отключённая вкладка	`text/disabled`
подложка	`radius-8` (`radius-full` с `shape="round"`), отступы `space-4` / `space-8`
линия	`border/subtle`
рамка фокуса	`border/accent/focus`

Значения по темам: Color.

Доступность

Встроено:

Ряд — это список вкладок с именем из label; каждая вкладка сообщает, выбрана ли она.
Одна остановка Tab: фокус попадает на выбранную вкладку, а следующий Tab ведёт в панель.
panel связывает вкладку с её панелью.
Выбранная вкладка отмечена подчёркиванием, а не только цветом.

На вашей стороне:

Задайте label ряду и value каждой вкладке.
Разметьте панели, как в разделе Панели.
Показывайте новую панель сразу, без шага загрузки.

Клавиша	Действие
`Tab`	переводит фокус на выбранную вкладку, затем в панель
`Right` / `Left`	выбирает следующую или предыдущую вкладку; по кругу
`Home` / `End`	выбирает первую или последнюю вкладку

Пределы контраста

Нажатие: в светлой и тёмной теме нажатая вкладка выглядит так же, как наведённая.

Анатомия

Панели

Форма

Состояния

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

Текст

Можно / нельзя

Связанные

API

tk-tab-bar

tk-tab

События

Токены

Доступность

Пределы контраста

`tk-tab-bar`

`tk-tab`