Tabs

Three sections, one screen. Arrow keys move and select; panels toggle with them.

Example

Usage numbers and recent activity live here.

Invoices, receipts, and the current plan.

Members, roles, and invitations.

<Tabs tabs={items}>
  <div data-tab-panel="overview" role="tabpanel"
    id="ink-panel-overview" aria-labelledby="ink-tab-overview">
    Usage numbers and recent activity live here.
  </div>
  ...
</Tabs>

Panel contract

Each panel is your markup with data-tab-panel matching the tabid, plus role="tabpanel", a matchingid="ink-panel-[id]", and aria-labelledby="ink-tab-[id]".

Pill and boxed

Pill treatment for toolbars.

Invoices live here.

Members live here.

Boxed treatment for cards.

Invoices live here.

Members live here.

<Tabs tabs={items} variant="pill">...</Tabs>
<Tabs tabs={items} variant="boxed">...</Tabs>

Props

Prop	Type	Default	Description
`tabs`	`Array<{ id, label }>`	-	Tabs in order.
`active`	`string`	first tab	Initial tab id.
`tablistLabel`	`string`	`Tabs`	Landmark name.
`variant`	`underline \| pill \| boxed`	`underline`	Tab list treatment.

Events

document.addEventListener("ink:tab:change", (event) => {
  console.log(event.detail.id);
});

Accessibility

Automatic activation: arrows move focus and select together.
Home/End jump; only the selected tab is in the Tab order.
Hidden panels stay in the DOM but leave the accessibility tree.