## Semantic tabs

Semantic tabs are an easy way to organise content by grouping similar information on the same page. This allows content to be viewed without having to navigate away from that page.

Our semantic tabs are built using parts of [Radix UI's Primitive Tabs](https://www.radix-ui.com/docs/primitives/components/tabs) which provides all the context handling, accessibility and keyboard navigation.

Easily build fully functioning semantic tabs by using the following components from the `@eds/tabs` package;

- `<Tabs />` - Provides context and state for all sub-components.
- `<TabList />` - Sub-component that should wrap the tab items. It handles overflow and bottom divider offset.
- `<TabItem />` - The tab element that contains a label and can be triggered to show a tab panel.
- `<TabPanel />` - Sub-component that contains the content of each tab item.

```tsx live
<Tabs defaultValue="tab1">
  <TabList>
    <TabItem label="TabItem #1" value="tab1" />
    <TabItem label="TabItem #2" value="tab2" />
  </TabList>
  <TabPanel value="tab1">
    <Flex
      alignItems="center"
      justifyContent="center"
      padding="large"
      backgroundColor="informativeSubtle"
      fontFamily="mono"
    >
      TabPanel #1
    </Flex>
  </TabPanel>
  <TabPanel value="tab2">
    <Flex
      alignItems="center"
      justifyContent="center"
      padding="large"
      backgroundColor="positiveSubtle"
      fontFamily="mono"
    >
      TabPanel #2
    </Flex>
  </TabPanel>
</Tabs>
```

### Uncontrolled

Simply pass the same string to the `value` prop of both tab item and tab panel to connect them with each other, and also the `defaultValue` prop on the `<Tabs />` component to set which tab to be initially rendered.

### Controlled

If you need to control the state of the tabs you can use the `value` and `onValueChange` props on the `<Tabs />` wrapper component.

## Navigational tabs

Navigational tabs are merely links that look exactly like semantic tabs. They are used for sub-page navigation within the same parent context.

For navigation tabs you don't need to wrap everything with the `<Tabs />` component, or have any `<TabPanel />`'s. All you need are `<TabItem />`s as children of a `<TabList />`. As soon as you define the `href` prop the tab item becomes a "navigational tab". Use the `isCurrentPage` prop to indicate which page the user is currently on.

It also supports any global link override passed down via the `@eds/core` context. See an example of this at [Global link override](/packages/core#global-link-override).

```tsx live
<TabList>
  <TabItem href="#first-link" label="First link" isCurrentPage={true} />
  <TabItem href="#second-link" label="Second link" isCurrentPage={false} />
  <TabItem href="#third-link" label="Third link" isCurrentPage={false} />
</TabList>
```

## Alignment

Change the alignment of the tab items inside the tab list by setting the `alignment` prop to `"start" | "center" | "stretch"`. It defaults to `start`.

```tsx live
<Flex flexDirection="column" gap="large">
  <TabList>
    <TabItem href="#tab-example" label="Tab" isCurrentPage />
    <TabItem href="#tab-example" label="Tab" />
  </TabList>
  <TabList alignment="center">
    <TabItem href="#tab-example" label="Tab" isCurrentPage />
    <TabItem href="#tab-example" label="Tab" />
  </TabList>
  <TabList alignment="stretch">
    <TabItem href="#tab-example" label="Tab" isCurrentPage />
    <TabItem href="#tab-example" label="Tab" />
  </TabList>
</Flex>
```

## Container padding

When placing the tabs in a layout that has padding, you can use the `containerPadding` responsive prop to make the tab list's divider and scroll container fill the width of the container. Prefer to use space tokens, but this prop also supports any padding value you want (using `rem` is highly recommended). It also supports the [responsive prop syntax](/foundations/responsive-layouts/#responsive-prop-syntax).

NOTE: In the example, the tab list's divider stretches out to the full width of the container.

```tsx live
<>
  <Text color="critical">Container with `xxlarge` padding:</Text>

  <Box borderStyle="dashed" borderWidth="thin" borderColor="critical" padding="xxlarge" position="relative">
    <Text color="positive">Tabs with `containerPadding="xxlarge"`:</Text>
    <Box backgroundColor="neutral" borderStyle="dashed" borderWidth="thin" borderColor="positive">
      <TabList containerPadding="xxlarge">
        <TabItem href="#tab-1-example" label="Tab 1" isCurrentPage />
        <TabItem href="#tab-2-example" label="Tab 2" />
      </TabList>
    </Box>
    <Box color="critical" position="absolute" left={0} marginLeft="xsmall" marginBottom="medium">
      <ArrowUpIcon />
    </Box>
  </Box>
</>
```

## Tab status or tally

Communicate the status or tally of a tab's content using the `badge` or `numberBadge` prop, by passing in an object of supported [props](/packages/badge/props/) which in turn renders either a `<Badge />` or `<NumberBadge />`. NOTE: You can not use both in the same `<TabItem />`.

```tsx live
<TabList>
  <TabItem href="#badge-example" label="Badge example" isCurrentPage badge={{ label: 'New', tone: 'informative' }} />
  <TabItem href="#number-badge-example" label="NumberBadge example" numberBadge={{ number: 100, cap: 99 }} />
</TabList>
```

## Horizontal overflow

The `<TabList />` utilises the [`ScrollWrap`](/packages/scroll-wrap/) component to automatically support indicated horizontal scrolling when the tab list's width overflows the container.

```tsx live
const mockedLinks = Array.from(Array(15).keys());

return (
  <TabList containerPadding="medium">
    {mockedLinks.map((i) => {
      const isCurrent = () => {
        if (typeof window !== 'undefined') {
          return window.location.hash === `#tab-example-${i}`;
        }
        return false;
      };

      return <TabItem href={`#tab-example-${i}`} label={`Tab ${i + 1}`} key={i} isCurrentPage={isCurrent()} />;
    })}
  </TabList>
);
```

## Label max width

The `<TabItem />` has a `labelMaxWidth` prop that defaults to `11rem`, which truncates the label if the text exceeds its value. It's recommended to keep the tab item's label as short as possible, but for special cases where that's not possible you can set the max width to a larger value, or `100%` to remove the truncation.

```tsx live
<TabList containerPadding="medium">
  <TabItem href="#tab-example" label="Tab with a really long label" isCurrentPage />
  <TabItem href="#tab-example" label="Tab with an important label and no truncation" labelMaxWidth="100%" />
</TabList>
```

Allows users to navigate between different views within the same context.

Tabs

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources