Tabs

Switching views of the same record: controlled value/onChange, the tablist role and arrow keys between tabs.

When to use it

Several views of the SAME record — an order detail with Overview, Items and History.

The active view should survive a page reload: value is controlled from outside, so the caller keeps it in the URL. The pattern:

const [params, setParams] = useSearchParams();
const view = params.get("view") ?? "overview";

<IngotTabs
  items={ITEMS}
  value={view}
  onChange={(key) => setParams({ view: key }, { replace: true })}
>

At most 6 views with 1–2 word labels. More views or longer labels mean it is navigation, not tabs.

When not to use it

Process steps with an order and completion — that is a steps pattern, not tabs.
Filtering the same list ("All / Active / Archived") — those are chips; a tab promises a different view, not a different slice.
Navigation between different records or pages — that is a menu, not tabs.

Properties

items: IngotTabItem[] — The views: a key, a translated label and an optional record count.
value: string — Key of the active view. Controlled from outside — typically the caller's URL.
onChange: (key: string) => void — Switches the view. Does not change the page's scroll position.
children: ReactNode — Content of the active view — rendered as a tabpanel tied to the active tab.
label: string — Translated aria-label of the tab list.
testId: string — data-testid of the tablist; a tab gets `${testId}-tab-${key}`.