Tabs
Roving-tabindex tab strip with an accent active indicator.
Preview
Three tabs
<div class="nx-tabs" role="tablist" aria-label="Example tabs" aria-orientation="horizontal"><button class="nx-tabs__item nx-tabs__item--active" type="button" role="tab" aria-selected="true" tabindex="0">Today</button><button class="nx-tabs__item" type="button" role="tab" aria-selected="false" tabindex="-1">Activity</button><button class="nx-tabs__item" type="button" role="tab" aria-selected="false" tabindex="-1">Settings</button></div><NxTabs items={["Today", "Activity", "Settings"]} activeIndex={0} onChange={setActiveIndex} />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
items | string[] | — | Required | Tab labels. |
activeIndex | number | 0 | Selected tab index. | |
onChange | (i:number)=>void | undefined | Called on click or arrow-key navigation. | |
idBase | string | "nxtab" | Id prefix for tab/panel id wiring. | |
panels | boolean | false | Opt-in aria-controls + matching role=tabpanel ids. |
Classes
| Class | Description |
|---|---|
.nx-tabs | role=tablist row, hairline bottom border |
.nx-tabs__item | role=tab button |
.nx-tabs__item--active | Accent text + underline |
.nx-tabs__item--disabled | Dimmed, not-allowed |
States
disabled item
Accessibility
- role=tablist / role=tab + aria-selected; the tablist is one Tab stop, Left/Right (direction-aware) + Home/End move selection.
- aria-controls is opt-in via the panels prop — never emit it without a matching role=tabpanel (a dangling IDREF breaks the ARIA wiring it's meant to demonstrate).
Do / Don’t
- Do: Pass panels + render matching role=tabpanel elements when tabs gate real content.Don’t: Don't key any consumer CSS off `.nx-tabs span` — DS-1 changed the markup to <button role="tab">.