---
url: /api/css/tabs.md
---
# CSS: tabs

`.instui-tabs` — A tabbed panel set: a tab list, selectable tabs, and their panels.

See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.

**Source:** [panel.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/tabs/members/panel/panel.css)

> \[!TIP]
> **JS Enhancement** — This component's CSS renders and works on its own; pair it with `@pantoken/interactions` to add the interactive behavior. See the [modifier table below](#modifiers).

## Accessibility

Wire the tab list with role="tablist", each tab with role="tab" and aria-selected, and each panel with role="tabpanel".

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";
```

## Examples

```html
<div class="instui-tabs">
  <div class="list" role="tablist" aria-label="Default tabs">
    <button class="tab -selected" role="tab" aria-selected="true" aria-controls="overview-panel">Overview</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="details-panel">Details</button>
    <button class="tab -disabled" role="tab" aria-disabled="true" aria-controls="disabled-panel" disabled>Disabled</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="history-panel">History</button>
  </div>
  <div class="panel" id="overview-panel" role="tabpanel">The Overview tab's content shows here.</div>
  <div class="panel" id="details-panel" role="tabpanel" hidden>The Details tab's content shows here.</div>
  <div class="panel" id="disabled-panel" role="tabpanel" hidden>The Disabled tab's content won't be visible.</div>
  <div class="panel" id="history-panel" role="tabpanel" hidden>The History tab's content shows here.</div>
</div>
```

## Structure

```text
.instui-tabs
  list (component)
    tabs.tab (component, 0..n)
  tabs.panel (component, 0..n)
```

```mermaid
flowchart TD
  n0[".instui-tabs"]:::cssdoc-root
  n1(["list"]):::cssdoc-component
  n2(["tabs.tab"]):::cssdoc-component
  n3(["tabs.panel"]):::cssdoc-component
  n1 -->|0..n| n2
  n0 --> n1
  n0 -->|0..n| n3
  click n1 "/api/css/list.md"
  click n2 "/api/css/tabs.tab.md"
  click n3 "/api/css/tabs.panel.md"
  classDef cssdoc-root fill:#eef2ff,stroke:#6366f1,color:#1e1b4b;
  classDef cssdoc-part fill:#f8fafc,stroke:#94a3b8,color:#0f172a;
  classDef cssdoc-slot fill:#f0fdf4,stroke:#4ade80,color:#14532d;
  classDef cssdoc-component fill:#fff7ed,stroke:#fb923c,color:#7c2d12;
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-overflow-scroll` | Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar. |
| `.-variant-secondary` | Rounded "folder" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded "folder" look. |

## Parts

| Part | Description |
| --- | --- |
| `.list` | The row of tabs. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-tabs-default-background` | `<color>` | `#00000000` |

## Subcomponents

* [list](/api/css/list.md)
* [tabs.panel](/api/css/tabs.panel.md)
* [tabs.tab](/api/css/tabs.tab.md)