---
title: Tabs
description: A segmented row that switches between panels of the same content, such as one snippet per client.
---

```tsx
import { Tabs } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function TabsBasic() {
  return (
    <Preview block={true}>
      <Tabs.Root defaultValue="tab-1">
        <Tabs.List aria-label="Tabs">
          <Tabs.Tab value="tab-1">Tab 1</Tabs.Tab>
          <Tabs.Tab value="tab-2">Tab 2</Tabs.Tab>
          <Tabs.Tab value="tab-3">Tab 3</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="tab-1">Panel 1</Tabs.Panel>
        <Tabs.Panel value="tab-2">Panel 2</Tabs.Panel>
        <Tabs.Panel value="tab-3">Panel 3</Tabs.Panel>
      </Tabs.Root>
    </Preview>
  );
}
```

- Use tabs for two to five views of the same thing. Use a [Chip](/deft/components/chip) to filter a list and a [Select](/deft/components/select) when there are more options.
- The active tab sits on a raised pill that slides between tabs. An icon before the label takes the icon color.
- Arrow keys move between tabs. Only the selected panel is rendered.
- Give `List` an `aria-label` when no heading names the tabs.

## API

Parts: `Root`, `List`, `Panel`, `Tab`. `List` renders the sliding indicator itself. Built on Base UI [Tabs](https://base-ui.com/react/components/tabs); `value`, `defaultValue` and `onValueChange` on `Root` come from it.