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.

<TabList>
  <TabItem isSelected>First</TabItem>
  <TabItem>Second</TabItem>
  <TabItem>Third</TabItem>
</TabList>

Usage as semantic tabs

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

Edit in Playroom

// TS will require `useState<HTMLDivElement | null>(null)`
const [listRef, setListRef] = useState(null);
const selectedIndex = useTabListState(listRef);
const { listProps, getTabAttributes, getPanelAttributes } = useTabList(
  selectedIndex
);
const tabs = [
  {
    label: 'First',
    panel: (
      <Flex
        background="dim"
        alignItems="center"
        justifyContent="center"
        height={120}
        marginTop="small"
      >
        <Text>First content</Text>
      </Flex>
    ),
  },
  {
    label: 'Second',
    panel: (
      <Flex
        background="dim"
        alignItems="center"
        justifyContent="center"
        height={120}
        marginTop="small"
      >
        <Text>Second content</Text>
      </Flex>
    ),
  },
  {
    label: 'Third',
    panel: (
      <Flex
        background="dim"
        alignItems="center"
        justifyContent="center"
        height={120}
        marginTop="small"
      >
        <Text>Third content</Text>
      </Flex>
    ),
  },
];
return (
  <React.Fragment>
    <TabList {...listProps} ref={setListRef}>
      {tabs.map(({ label }, index) => {
        return (
          <TabItem
            key={label}
            isSelected={index === selectedIndex}
            {...getTabAttributes(index)}
          >
            {label}
          </TabItem>
        );
      })}
    </TabList>
    {tabs.map(({ label, panel }, index) => {
      return (
        <div key={label} {...getPanelAttributes(index)}>
          {panel}
        </div>
      );
    })}
  </React.Fragment>
);

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, you can also use a client side routed link component such as NextLink from @balance-web/next-link though.

Edit in Playroom

<TabList>
  <TabItem as="a" href="#" isSelected>
    First
  </TabItem>
  <TabItem as="a" href="#">
    Second
  </TabItem>
  <TabItem as="a" href="#">
    Third
  </TabItem>
</TabList>

Tabs

Usage as semantic tabs

Usage as navigational elements