Tabs

Usage

Exposes both a set of visual primitives that have the appearance of tabs along with helpers to create semantic tabs.

This allows the tabs to be used as navigational elements or as semantic tab elements.

Usage as semantic tabs

The useTabListState hook expects a type of HTMLDivElement (the live editor won't allow types).

Always give the TabList an accessible name with aria-label (or aria-labelledby) so assistive technology can announce what the set of tabs is for.

Vertical tabs

When the tabs are stacked vertically, pass the orientation to both useTabListState and useTabList. This switches keyboard navigation to the ArrowUp/ArrowDown keys and sets aria-orientation="vertical" on the tab list so assistive technology announces it correctly.

const selectedIndex = useTabListState(listRef, 'vertical');
const { listProps, getTabAttributes, getPanelAttributes } = useTabList(
  selectedIndex,
  'vertical'
);

Managing selected index yourself

useTabListState is useState plus useTabListEventListeners, the hook that actually binds the arrow-key/Home/End navigation to the tab list element. If you're already managing selectedIndex some other way (for example, syncing it with a route), call useTabListEventListeners directly instead of useTabListState to get the same keyboard behaviour without a second, redundant piece of state.

const [selectedIndex, setSelectedIndex] = useState(0);

useTabListEventListeners({
  tabListElement: listRef.current,
  selectedIndex,
  onSelectedIndexChange: setSelectedIndex,
});

Usage as navigational elements

To use the tab components as navigational elements, you can use the as prop. The example below shows using regular a elements, but you can also pass a client side routed link component.