Tabs

A segmented row that switches between panels of the same content, such as one snippet per client.

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 to filter a list and a 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; value, defaultValue and onValueChange on Root come from it.