---
title: Tabs
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/Tabs
---

Tabs are used to help group various related content into separate sections. Those sections can be all or contained in a portion of the screen. We recommend using one set of tabs per screen and also only using it for different related content types. For example, when you have different data about a single entity, you might bucket the data into different sections.

Do NOT separate an action, like create, from other content sections in tabs. The action should be triggered by an icon or button and open either a modal or stacked page.

### Usage

```js
import { Tabs } from 'nr1'
```

### Examples

#### Basic

```jsx
<Tabs defaultValue="tab-3">
  <TabsItem value="tab-1" label="Tab 1">
    Tab 1 content
  </TabsItem>
  <TabsItem value="tab-2" label="Another tab with a longer name">
    Tab 2 content
  </TabsItem>
  <TabsItem value="tab-3" label="A tab open by default">
    Tab 3 content
  </TabsItem>
</Tabs>
```

#### Render Callback

```jsx
function render() {
  const items = new Array(10000).fill().map((_, i) => ({
    value: i,
    content: `Tab ${i} content...`,
    label: `Item ${i}`,
  }));

  return (
    <div className="nr1-Example--tabs">
      <Tabs items={items}>
        {({ item }) => (
          <TabsItem value={item.value} label={item.label}>
            {item.content}
          </TabsItem>
        )}
      </Tabs>
    </div>
  );
}
```

### Props

| `ariaLabel` string                 | Provide an accessibility label that describes the purpose of the set of tabs, e.g. `"Settings categories"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` REQUIRED node\|function | It can be either an array of `<TabsItem>` elements or a render callback (Function as Children).When using the render callback items need to be provided through the `items` prop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `className` string                 | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `defaultValue` any                 | `value` of the `<TabsItem>` which you want to be selected by default when the component mounts.If not defined, the first tab item will be selected by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `items` shape\[]                   | The items to render, which required when rendering items with the render callback (Function as Children).The item must contain `value` and `label` properties, and optionally a `disabled` boolean property. This item will be provided as an argument to the render callback. shape `value` REQUIRED any `label` REQUIREDstring `disabled` boolean ````jsx function render() {   const items = [     { label: 'a', value: 'x', foo: 'bar' },     { label: 'b', value: 'y', disabled: false, foo: 'baz' },     { label: 'c', value: 'z', disabled: true, foo: 'foobar' },   ];    return (     <Tabs items={items}>       {({ item }) => (         <TabsItem value={item.value} label={item.label}>           {item.foo}         </TabsItem>       )}     </Tabs>   ); } ```  ```` |
| `onChange` function                | Callback fired any time the selected tab changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `spacingType` enum\[]              | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. Tabs.SPACING_TYPE.EXTRA_LARGE, Tabs.SPACING_TYPE.LARGE, Tabs.SPACING_TYPE.MEDIUM, Tabs.SPACING_TYPE.NONE, Tabs.SPACING_TYPE.OMIT, Tabs.SPACING_TYPE.SMALL,                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `style` object                     | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `testId` string                    | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                                                                                                                                                                                                                                                                                                                                                                                                |
| `value` any                        | When you need to have a tab other than the first open by default, use the pre-selected tab. Before using this option, we recommend considering if you have the right tab order for your experience.If defined, it turns the component into a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

### Type definitions