---
name: Tabs
menu: []
parent: Modules
route: /patterns/tabs
---

# Tabs

Tabs allow users to navigate between related sections of content, displaying one section at a time.

```specimen-react
<Tabs initiallyActiveTabId="tab-1">
  {({ tabListProps, tabProps, tabPanelProps }) => (
    <>
      <TabList {...tabListProps('Test tabs')}>
        <Tab {...tabProps('tab-1')}>Electricity & gas mix</Tab>
        <Tab {...tabProps('tab-2')}>Annual cost</Tab>
        <Tab {...tabProps('tab-3')}>
          Another really long tab name which will wrap
        </Tab>
      </TabList>
      <TabPanel {...tabPanelProps('tab-1')}>
        <div style={{ padding: '1rem' }}>Tab 1 content</div>
      </TabPanel>
      <TabPanel {...tabPanelProps('tab-2')}>
        <div style={{ padding: '1rem' }}>Tab 2 content</div>
      </TabPanel>
      <TabPanel {...tabPanelProps('tab-3')}>
        <div style={{ padding: '1rem' }}>Tab 3 content</div>
      </TabPanel>
    </>
  )}
</Tabs>
```

## Configurations

The Tabs component makes use of three render props: `tabListProps`, `tabPanelProps`, and `tabProps`.

## `tabListProps`

It requires a `label`, and optionally accepts any further props that could be added to a regular `<div>` element.

## `tabPanelProps`

It requires a `tabId`, and optionally accepts any further props that could be added to a regular `<section>` element.

## `tabProps`

It requires a `tabId`, and optionally accepts any further props that could be added to a regular `<button>` element.
