Tabs

Move between related panels without leaving the page.

Live example

A reviewed public example, isolated from this page.

import { Tabs } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

list<div>
Named tablist; owns orientation-aware keyboard navigation and skips disabled tabs.
ARIA role: tablist
panel<div>
Tab panel with safe or explicit id/label wiring; inactive panels are hidden and tabIndex remains consumer-selectable.
ARIA role: tabpanel
root<div>
Selection and registration owner; null selection keeps one enabled tab tabbable without selecting it.
Uses native semantics
tab<button>
Roving native button with safe or explicit id/controls wiring; disabled tabs are registered and skipped.
ARIA role: tab