---
title: "Tabs"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JS-free Tailwind CSS Tabs with boxed, bordered, lifted, and underline variants. Accessible panel switching for organized content sections and navigation."
url: https://frutjam.com/zh-hant/components/tabs
---

# Tabs Component

選項卡元件將內容組織成單獨的部分，使用者可以在不離開頁面的情況下在這些部分之間進行切換。選項卡採用語義 HTML 和無線電輸入模式構建，為相關資訊分組提供直覺的導航。 Frutjam 選項卡系統支援多種尺寸、樣式和佈局方向（僅 CSS 或 JavaScript 控制），使其成為儀表板、文件和選項卡式介面的理想選擇。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級             | 類型  | 描述                           |
| -------------- | --- | ---------------------------- |
| tabs           | 根據  | 一組選項卡輸入和內容面板的容器              |
| tab            | 修飾符 | 單獨選項卡無線電輸入                   |
| tab-content    | 修飾符 | 與選項卡關聯的內容面板                  |
| tab-active     | 修飾符 | 強制選項卡處於活動/選定狀態（對於 JS 控制的選項卡） |
| tab-disabled   | 修飾符 | 選項卡的停用外觀                     |
| tabs-underline | 風格  | 底線指示器樣式                      |
| tabs-lifted    | 風格  | 卡片式拉環樣式                      |
| tabs-box       | 風格  | 盒裝藥丸式標籤                      |
| tabs-vertical  | 修飾符 | 垂直選項卡佈局，選項卡位於左側列中            |
| tabs-end       | 修飾符 | 將選項卡行與結尾對齊（LTR 中的右側）         |
| tabs-bottom    | 修飾符 | 將選項卡放置在內容面板下方                |
| tabs-xs        | 尺寸  | 超小標籤填充                       |
| tabs-sm        | 尺寸  | 小標籤填充                        |
| tabs-md        | 尺寸  | 中等製表符填充（預設）                  |
| tabs-lg        | 尺寸  | 大標籤填充                        |
| tabs-xl        | 尺寸  | 超大標籤填充                       |

## 基本用法

預設標籤使用簡單的活動底線樣式和單選輸入。每個 `tab` 輸入都與緊接在後的 `tab-content` 面板配對。

```html
<div class="tabs">
  <input type="radio" name="tabs-basic" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">
    <p>Overview content: a high-level summary of features, metrics, or status. This panel is visible by default.</p>
  </div>

  <input type="radio" name="tabs-basic" class="tab" aria-label="Details">
  <div class="tab-content pt-4">
    <p>Details content: in-depth information such as configuration options, data breakdown, or extended documentation.</p>
  </div>

  <input type="radio" name="tabs-basic" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">
    <p>Activity content: a timeline, event log, or recent changes relevant to this section.</p>
  </div>
</div>
```

## 選項卡樣式

使用 `tabs-underline`、`tabs-box` 或 `tabs-lifted` 來變更選項卡條的視覺樣式。

```html
<div class="tabs tabs-underline">
  <input type="radio" name="style-underline" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">Underline style — a colored bottom border marks the active tab against a full-width separator line.</div>
  <input type="radio" name="style-underline" class="tab" aria-label="Details">
  <div class="tab-content pt-4">Details panel.</div>
  <input type="radio" name="style-underline" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">Activity panel.</div>
</div>

<div class="tabs tabs-box">
  <input type="radio" name="style-box" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">Box style — the active tab gets a raised background inside a tinted pill container.</div>
  <input type="radio" name="style-box" class="tab" aria-label="Details">
  <div class="tab-content pt-4">Details panel.</div>
  <input type="radio" name="style-box" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">Activity panel.</div>
</div>

<div class="tabs tabs-lifted">
  <input type="radio" name="style-lifted" class="tab" aria-label="Overview" checked>
  <div class="tab-content p-4">Lifted style — the active tab appears as a card tab with borders that merge into the content panel below.</div>
  <input type="radio" name="style-lifted" class="tab" aria-label="Details">
  <div class="tab-content p-4">Details panel.</div>
  <input type="radio" name="style-lifted" class="tab" aria-label="Activity">
  <div class="tab-content p-4">Activity panel.</div>
</div>
```

## 標籤尺寸

將選項卡內邊距從 `tabs-xs` 縮放到 `tabs-xl` 以符合佈局的密度。

```html
<div class="tabs tabs-underline tabs-xs">
  <input type="radio" name="size-xs" class="tab" aria-label="Extra Small" checked>
  <div class="tab-content pt-3">Extra small tabs</div>
  <input type="radio" name="size-xs" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-sm">
  <input type="radio" name="size-sm" class="tab" aria-label="Small" checked>
  <div class="tab-content pt-3">Small tabs</div>
  <input type="radio" name="size-sm" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-md">
  <input type="radio" name="size-md" class="tab" aria-label="Medium" checked>
  <div class="tab-content pt-3">Medium tabs (default)</div>
  <input type="radio" name="size-md" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-lg">
  <input type="radio" name="size-lg" class="tab" aria-label="Large" checked>
  <div class="tab-content pt-3">Large tabs</div>
  <input type="radio" name="size-lg" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-xl">
  <input type="radio" name="size-xl" class="tab" aria-label="Extra Large" checked>
  <div class="tab-content pt-3">Extra large tabs</div>
  <input type="radio" name="size-xl" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>
```

## 帶按鈕的選項卡

將 `tab` 與 `btn` 結合起來，將選項卡呈現為樣式按鈕。 `btn` 類別接管顏色和邊框半徑，同時保留選項卡選擇邏輯。

```html
<div class="tabs gap-2">
  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Home" checked>
  <div class="tab-content pt-4">
    <p>Home — your primary landing panel with quick access to key actions and a summary view.</p>
  </div>

  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Profile">
  <div class="tab-content pt-4">
    <p>Profile — manage personal information, preferences, and account details.</p>
  </div>

  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Settings">
  <div class="tab-content pt-4">
    <p>Settings — configure notifications, privacy options, and connected integrations.</p>
  </div>
</div>
```

## 禁用的選項卡

新增 `tab-disabled` 和 `disabled` 屬性以防止與選項卡互動。

```html
<div class="tabs tabs-underline">
  <input type="radio" name="disabled-tabs" class="tab" aria-label="Available" checked>
  <div class="tab-content pt-4">This tab is active and accessible.</div>

  <input type="radio" name="disabled-tabs" class="tab tab-disabled" aria-label="Unavailable" disabled>
  <div class="tab-content pt-4">This content is not reachable.</div>

  <input type="radio" name="disabled-tabs" class="tab" aria-label="Another">
  <div class="tab-content pt-4">Another available tab panel.</div>
</div>
```

## 垂直標籤

`tabs-vertical` 切換到網格佈局，選項卡位於左側列，內容填入右側。列之間會自動新增全高分隔線。

```html
<div class="tabs tabs-vertical">
  <input type="radio" name="vertical" class="tab" aria-label="General" checked>
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">General Settings</h3>
    <p>Manage your display name, language preference, and time zone.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Security">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Security</h3>
    <p>Update your password, enable two-factor authentication, and review active sessions.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Notifications">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Notifications</h3>
    <p>Choose which events trigger email, push, or in-app notifications.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Billing">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Billing</h3>
    <p>View invoices, update your payment method, and manage your subscription plan.</p>
  </div>
</div>
```

## 底部的選項卡

`tabs-bottom` 翻轉佈局，使內容顯示在選項卡條上方，這對於移動式導覽列或底部工具列很有用。

```html
<div class="tabs tabs-bottom tabs-underline">
  <input type="radio" name="bottom-tabs" class="tab" aria-label="Feed" checked>
  <div class="tab-content pb-4">
    <p>Feed — latest posts and updates from people you follow.</p>
  </div>

  <input type="radio" name="bottom-tabs" class="tab" aria-label="Explore">
  <div class="tab-content pb-4">
    <p>Explore — discover trending topics, creators, and recommended content.</p>
  </div>

  <input type="radio" name="bottom-tabs" class="tab" aria-label="Saved">
  <div class="tab-content pb-4">
    <p>Saved — articles and posts you bookmarked for later.</p>
  </div>
</div>
```

## 製表符對齊到末尾

`tabs-end` 將選項卡條推到容器的右側（末尾），對於輔助導航或操作選單很有用。

```html
<div class="tabs tabs-underline tabs-end">
  <input type="radio" name="end-tabs" class="tab" aria-label="Week" checked>
  <div class="tab-content pt-4">Weekly view — aggregated metrics for the past 7 days.</div>

  <input type="radio" name="end-tabs" class="tab" aria-label="Month">
  <div class="tab-content pt-4">Monthly view — trend analysis over the past 30 days.</div>

  <input type="radio" name="end-tabs" class="tab" aria-label="Year">
  <div class="tab-content pt-4">Yearly view — annual summary and year-over-year comparison.</div>
</div>
```

## JavaScript 控制的選項卡

對於非無線電模式（例如錨連結、動態內容），請在 JavaScript 中將 `tab-active` 新增至所選標籤。配對的 `tab-content` 透過 `.tab-active + .tab-content` 選擇器顯示。