Tabs

<Tab>
  Tab Link 1
</Tab>
<Tab>
  Tab Link 2
</Tab>
<Tab>
  Tab Link 3
</Tab>

({ activeTabId }) => {
  setActiveTabId(activeTabId);
}

import * as React from "react";
import { TabList, Tab } from "spaceweb/tabs";

export default () => {
  const [activeTabId, setActiveTabId] = React.useState(
    "1"
  );
  return (
    <TabList
      position="top"
      className="border-b border-solid spr-border-03"
      variant="default"
      onChange={({ activeTabId }) => {
        setActiveTabId(activeTabId);
      }}
      activeTabId={activeTabId}
    >
      <Tab>Tab Link 1</Tab>
      <Tab>Tab Link 2</Tab>
      <Tab>Tab Link 3</Tab>
    </TabList>
  );
}

The TabList component is used for navigating frequently accesssed, but distinct categories.

Accessibility

• tab, shift + tab - to move focus between tabs.
• Space or Enter - to display the selected tab's content
• aria-selected, aria-disabled are applied to the tabs.
• Roles: role=tab, role=tablist, role=tabpanel

Examples

• tabId is mandatory for TabsPanel when used within StatefulTabs.
• We do not assume where TabList or TabsPanels would lie inside StatefulTabs.
• If tabId is not supplied to Tab inside TabList then it is their ordered index.

• tabId supplied to Tab inside TabList corresponds to the tabId to be passed to corresponding TabsPanel.

API

TabList props

You can check the implementation of the component for more details.

Tabs exports

You can import this module like so:

import {StatefulTabs} from 'spaceweb/tabs'

It exports the following components or utility functions:

• StatefulTabs
• Tab
• TabList
• TabsPanel