Navigation

TabList

Tablist container inside a tabs composite that wraps tab triggers and exposes the ARIA tablist role with orientation metadata.

import { TabList } from '@lostgradient/cinder/tab-list';
navigationtabs
01

Overview

Keyboard-navigable row of tab triggers that control which tab panel is visible.

Usage

TabList is a compose-only leaf of Tabs. The idiomatic API is Tabs.List, reached through the parent namespace — see the tabs README for the composed snippet. The flat @lostgradient/cinder/tab-list subpath remains exported for à-la-carte builds that import the leaf directly.

02

When to use

Use when
  • Wrapping a row or column of tab triggers inside a tabs ancestor.
  • Providing the accessible label or labelledby reference for the tablist landmark.
Avoid when
  • Used outside a tabs ancestor — the component throws at construction.
  • Rendering tab-panel content — keep panels as siblings outside the tab-list.
03

Props

Props for tab-list
Name
Type
Default
Description
label text Optional accessible name for the tablist. Sets aria-label.
ariaLabelledby text Reference to a heading or label element that names the tablist.
children required snippet Tab children.