Tabs

An accessible tabs component.

The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

Import

import {
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
} from '@trendmicro/react-styled-ui';import {
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
} from '@trendmicro/react-styled-ui';

Usage

You can render any element within Tabs, but TabList should only have Tab as children, and TabPanels should have TabPanel as children.

Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have tabs at the top, at the bottom, or both.


EDITABLE EXAMPLE
<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs><Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Accessing Internal state

<TabPanel> provides access to one internal state: isActive. Use the render prop pattern to access the internal states.


EDITABLE EXAMPLE
<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      {({ isActive }) => {
        if (isActive) {
          return (<p>two!</p>);
        }
        return null;
      }}
    </TabPanel>
  </TabPanels>
</Tabs><Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      {({ isActive }) => {
        if (isActive) {
          return (<p>two!</p>);
        }
        return null;
      }}
    </TabPanel>
  </TabPanels>
</Tabs>

Tab variants and color

Tabs come in 3 different variants to style the tabs: line,enclosed, unstyled


EDITABLE EXAMPLE
<Tabs variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs><Tabs variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Make a Tab disabled

When a Tab is disabled, it's skipped during keyboard navigation and it's not clickable.


EDITABLE EXAMPLE
function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab disabled>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
      <TabPanels>
        <TabPanel><p>1</p></TabPanel>
        <TabPanel><p>2</p></TabPanel>
        <TabPanel><p>3</p></TabPanel>
      </TabPanels>
    </Tabs>
  );
}function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab disabled>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
      <TabPanels>
        <TabPanel><p>1</p></TabPanel>
        <TabPanel><p>2</p></TabPanel>
        <TabPanel><p>3</p></TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Change the tabs alignment

You can change the alignment of the TabList by passing align prop. We support 3 sizes left, center, right.


EDITABLE EXAMPLE
<Tabs align="right" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs><Tabs align="right" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Fitted Tabs

Stretch the tab list to fit the container by passing isFitted prop.


EDITABLE EXAMPLE
<Tabs isFitted variant="enclosed">
  <TabList mb="1em">
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs><Tabs isFitted variant="enclosed">
  <TabList mb="1em">
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Styling the tab states manually

In event you need to create custom styles for the tabs. Simply set the variant to unstyled, and use the _selected, _hover, _active style props.


EDITABLE EXAMPLE
<Tabs variant="unstyled">
  <TabList>
    <Tab _selected={{ color: "white", bg: "blue:50" }}>Tab 1</Tab>
    <Tab _selected={{ color: "white", bg: "green:40" }}>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs><Tabs variant="unstyled">
  <TabList>
    <Tab _selected={{ color: "white", bg: "blue:50" }}>Tab 1</Tab>
    <Tab _selected={{ color: "white", bg: "green:40" }}>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

AutoSizer Table in the tab


EDITABLE EXAMPLE
function FullWidthTable() {
  const columns = React.useMemo(() => [
    {
      Header: 'Event Type',
      id: 'eventType',
      accessor: 'eventType',
      width: 'auto',
    },
    {
      Header: 'Affected Devices',
      id: 'affectedDevices',
      accessor: 'affectedDevices',
      width: 160,
    },
    {
      Header: 'Detections',
      id: 'detections',
      accessor: 'detections',
      width: '10%',
    },
  ], []);

  const data = React.useMemo(() => [
    { id: 1, eventType: 'Virus/Malware', affectedDevices: 20, detections: 634 },
    { id: 2, eventType: 'Spyware/Grayware', affectedDevices: 20, detections: 634 },
  ], []);

  const getCalculatedColumns = ({ initColumns, tableWidth }) => {
    const columns = initColumns.map(column => {
      let columnWidth = column.width;
      if (typeof columnWidth === 'string') {
        const lastChar = columnWidth.substr(columnWidth.length - 1);
        if (lastChar === '%') {
          columnWidth = tableWidth * (parseFloat(columnWidth) / 100);
          return {
            ...column,
            width: columnWidth
          };
        }
        if (columnWidth === 'auto') {
          return {
            ...column,
            width: 0
          };
        }
      }
      return column;
    });
    const customWidthColumns = columns.filter(column => !!column.width);
    const totalCustomWidth = customWidthColumns.reduce((accumulator, column) => accumulator + column.width, 0);
    let defaultCellWidth = (tableWidth - totalCustomWidth) / (columns.length - customWidthColumns.length);
    defaultCellWidth = defaultCellWidth <= 0 ? 150 : defaultCellWidth;
    return columns.map(column => {
      if (!!column.width) {
        return column;
      }
      return {
        ...column,
        width: defaultCellWidth
      };
    });
  };

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useBlockLayout,
  );

  return (
    <AutoSizer>
      {({ height, width }) => {
        if (height === 0 || width === 0) {
          return null;
        }
        const newColumns = getCalculatedColumns({ initColumns: columns, tableWidth: width });
        return (
          <Table
            {...getTableProps()}
          >
            <TableHeader>
              {headerGroups.map(headerGroup => (
                <TableHeaderRow {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map(column => {
                    const columnId = column.id;
                    const _column = newColumns.filter(column => column.id === columnId);
                    const _columnWidth = _column[0].width;
                    return (
                      <TableHeaderCell
                        width={_columnWidth}
                        {...column.getHeaderProps()}
                      >
                        {column.render('Header')}
                      </TableHeaderCell>
                    );
                  })}
                </TableHeaderRow>
              ))}
            </TableHeader>
            <TableBody {...getTableBodyProps()}>
              {rows.map((row, i) => {
                prepareRow(row);
                return (
                  <TableRow {...row.getRowProps()}>
                    {
                      row.cells.map(cell => {
                        const columnId = cell.column.id;
                        const _column = newColumns.filter(column => column.id === columnId);
                        const _columnWidth = _column[0].width;
                        return (
                          <TableCell
                            width={_columnWidth}
                            {...cell.getCellProps()}
                          >
                            {cell.render('Cell')}
                          </TableCell>
                        );
                      })
                    }
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        );
      }}
    </AutoSizer>
  );
}

render(
  <Tabs height="300px">
    <TabList>
      <Tab>Auto height Panel</Tab>
      <Tab>Full height Panel</Tab>
    </TabList>
    <TabPanels height="calc(100% - 40px)">
      <TabPanel border="1" borderColor="green" marginTop="1x" padding="1x">
        Hi~~~
      </TabPanel>
      <TabPanel height="100%" border="1" borderColor="green" marginTop="1x" padding="1x">
        <FullWidthTable />
      </TabPanel>
    </TabPanels>
  </Tabs>
);function FullWidthTable() {
  const columns = React.useMemo(() => [
    {
      Header: 'Event Type',
      id: 'eventType',
      accessor: 'eventType',
      width: 'auto',
    },
    {
      Header: 'Affected Devices',
      id: 'affectedDevices',
      accessor: 'affectedDevices',
      width: 160,
    },
    {
      Header: 'Detections',
      id: 'detections',
      accessor: 'detections',
      width: '10%',
    },
  ], []);

  const data = React.useMemo(() => [
    { id: 1, eventType: 'Virus/Malware', affectedDevices: 20, detections: 634 },
    { id: 2, eventType: 'Spyware/Grayware', affectedDevices: 20, detections: 634 },
  ], []);

  const getCalculatedColumns = ({ initColumns, tableWidth }) => {
    const columns = initColumns.map(column => {
      let columnWidth = column.width;
      if (typeof columnWidth === 'string') {
        const lastChar = columnWidth.substr(columnWidth.length - 1);
        if (lastChar === '%') {
          columnWidth = tableWidth * (parseFloat(columnWidth) / 100);
          return {
            ...column,
            width: columnWidth
          };
        }
        if (columnWidth === 'auto') {
          return {
            ...column,
            width: 0
          };
        }
      }
      return column;
    });
    const customWidthColumns = columns.filter(column => !!column.width);
    const totalCustomWidth = customWidthColumns.reduce((accumulator, column) => accumulator + column.width, 0);
    let defaultCellWidth = (tableWidth - totalCustomWidth) / (columns.length - customWidthColumns.length);
    defaultCellWidth = defaultCellWidth <= 0 ? 150 : defaultCellWidth;
    return columns.map(column => {
      if (!!column.width) {
        return column;
      }
      return {
        ...column,
        width: defaultCellWidth
      };
    });
  };

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useBlockLayout,
  );

  return (
    <AutoSizer>
      {({ height, width }) => {
        if (height === 0 || width === 0) {
          return null;
        }
        const newColumns = getCalculatedColumns({ initColumns: columns, tableWidth: width });
        return (
          <Table
            {...getTableProps()}
          >
            <TableHeader>
              {headerGroups.map(headerGroup => (
                <TableHeaderRow {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map(column => {
                    const columnId = column.id;
                    const _column = newColumns.filter(column => column.id === columnId);
                    const _columnWidth = _column[0].width;
                    return (
                      <TableHeaderCell
                        width={_columnWidth}
                        {...column.getHeaderProps()}
                      >
                        {column.render('Header')}
                      </TableHeaderCell>
                    );
                  })}
                </TableHeaderRow>
              ))}
            </TableHeader>
            <TableBody {...getTableBodyProps()}>
              {rows.map((row, i) => {
                prepareRow(row);
                return (
                  <TableRow {...row.getRowProps()}>
                    {
                      row.cells.map(cell => {
                        const columnId = cell.column.id;
                        const _column = newColumns.filter(column => column.id === columnId);
                        const _columnWidth = _column[0].width;
                        return (
                          <TableCell
                            width={_columnWidth}
                            {...cell.getCellProps()}
                          >
                            {cell.render('Cell')}
                          </TableCell>
                        );
                      })
                    }
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        );
      }}
    </AutoSizer>
  );
}

render(
  <Tabs height="300px">
    <TabList>
      <Tab>Auto height Panel</Tab>
      <Tab>Full height Panel</Tab>
    </TabList>
    <TabPanels height="calc(100% - 40px)">
      <TabPanel border="1" borderColor="green" marginTop="1x" padding="1x">
        Hi~~~
      </TabPanel>
      <TabPanel height="100%" border="1" borderColor="green" marginTop="1x" padding="1x">
        <FullWidthTable />
      </TabPanel>
    </TabPanels>
  </Tabs>
);

Manually Activated Tabs

By default, Tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

The content of a TabPanel should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specifc tab, users can activate a tab by pressing Space or Enter.


EDITABLE EXAMPLE
<Tabs isManual variant="line">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs><Tabs isManual variant="line">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Data Tabs

If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.


EDITABLE EXAMPLE
function Example() {
  // First, you create the component...
  function DataTabs({ data }) {
    return (
      <Tabs>
        <TabList>
          {data.map((tab, index) => (
            <Tab key={index}>{tab.label}</Tab>
          ))}
        </TabList>
        <TabPanels>
          {data.map((tab, index) => (
            <TabPanel p={4} key={index}>
              {tab.content}
            </TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    );
  }

  // Next, you have an array of data...
  const tabData = [
    {
      label: "Nigerian Jollof",
      content: "Perhaps the greatest dish ever invented.",
    },
    {
      label: "Pounded Yam & Egusi",
      content:
        "Perhaps the surest dish ever invented but fills the stomach more than rice.",
    },
  ];

  // you can just pass it in:
  return <DataTabs data={tabData} />;
}function Example() {
  // First, you create the component...
  function DataTabs({ data }) {
    return (
      <Tabs>
        <TabList>
          {data.map((tab, index) => (
            <Tab key={index}>{tab.label}</Tab>
          ))}
        </TabList>
        <TabPanels>
          {data.map((tab, index) => (
            <TabPanel p={4} key={index}>
              {tab.content}
            </TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    );
  }

  // Next, you have an array of data...
  const tabData = [
    {
      label: "Nigerian Jollof",
      content: "Perhaps the greatest dish ever invented.",
    },
    {
      label: "Pounded Yam & Egusi",
      content:
        "Perhaps the surest dish ever invented but fills the stomach more than rice.",
    },
  ];

  // you can just pass it in:
  return <DataTabs data={tabData} />;
}

Accessibility

Keyboard

Key	Action
`ArrowLeft`	Moves focus to the next tab
`ArrowUp`	Moves focus to the previous tab
`Tab`	When focus moves into the tab list, places focus on the active tab element
`Space` or `Enter`	Activates the tab if it was not activated automatically on focus
`Home`	Moves focus to the first tab
`End`	Moves focus to the last tab

ARIA roles

Component	Aria	Usage
Tab	`role="tab"`	Indicates that it's a tab
	`aria-selected`	Set to `true` a tab is selected and all other Tabs have it set to `false`.
	`aria-controls`	Set to the `id` of its associated `TabPanel`
TabList	`id`	The `id` of the `TabPanel` that's referencd by its associated `Tab`
	`aria-orientation`	Set to vertical or horizontal based on the value of the `orientation` prop.
	`role="tablist"`	Indicates that it's a tablist
	`aria-labelledby`	Set to the `id` of the `Tab` that labels the `TabPanel`.

Props

Tabs

Name	Type	Default	Description
`onChange`	`(index: number) => void`		The callback to update the active tab index.
`index`	`number`		The controlled index of the tabs.
`defaultIndex`	`number`		The index of the initial active tab.
`activateOnKeypress`	`boolean`		If `true`, keyboard navigation changes focus between tabs but doens't activate it. User will have to press `Enter` or `Space` to active it. This is deprecated and will be removed in the v1 release
`isManual`	`boolean`		If `true`, keyboard navigation changes focus between tabs but doens't activate it. User will have to press `Enter` or `Space` to active it
`children`	`ReactNode`		The children of the switch.
`variant`	`line`,`enclosed`, `unstyled`	`line`	The visual style of the tab.
`orientation`	`horizontal`, `vertical`	`horizontal`	The orientation of the tabs
`isFitted`	`boolean`		If `true`, the tabs will stretch to fill the available space

Tab

Name	Type	Default	Description
`disabled`	`boolean`		If `true`, the user cannot interact with the control. This sets `aria-disabled=true` and you can style this state by passing the `_disabled` prop.

TabPanel

Name	Type	Default	Description
children	ReactNode, (props: InternalState) => ReactNode		The children of the `TabPanel`.