---
title: "Toggle"
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: "Tailwind CSS Toggle using native HTML inputs. Accessible on/off switch with custom colors, sizes, and label support for settings and preference forms."
url: https://frutjam.com/zh-hant/components/toggle
---

# Toggle Component

切換組件是二進位開關，可讓使用者開啟和關閉功能或設定。切換使用本機 HTML 複選框輸入建置並透過 Tailwind CSS 動畫增強，提供了一種直覺的方式來控制布林狀態。 Frutjam 切換系統支援多種顏色、尺寸和停用狀態，非常適合設定面板、功能標誌和首選項控制。

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

| 班級               | 類型 | 描述        |
| ---------------- | --- | --------- |
| toggle           | 根據 | 動畫開/關開關輸入 |
| toggle-xs        | 尺寸 | 特小號       |
| toggle-sm        | 尺寸 | 小的        |
| toggle-md        | 尺寸 | 中（預設）     |
| toggle-lg        | 尺寸 | 大的        |
| toggle-xl        | 尺寸 | 特大號       |
| toggle-primary   | 顏色 | 主要主題顏色    |
| toggle-secondary | 顏色 | 次要主題色     |
| toggle-accent    | 顏色 | 強調主題顏色    |
| toggle-neutral   | 顏色 | 中性主題色     |
| toggle-info      | 顏色 | 訊息語意顏色    |
| toggle-success   | 顏色 | 成功語意色     |
| toggle-warning   | 顏色 | 警告語意顏色    |
| toggle-error     | 顏色 | 錯誤語意顏色    |

## 基本用法

## 切換尺寸

```html
<input type="checkbox" class="toggle toggle-xs">
<input type="checkbox" class="toggle toggle-sm">
<input type="checkbox" class="toggle toggle-md">
<input type="checkbox" class="toggle toggle-lg">
<input type="checkbox" class="toggle toggle-xl">
```

## 切換顏色

```html
<input type="checkbox" class="toggle" checked>
<input type="checkbox" class="toggle toggle-primary" checked>
<input type="checkbox" class="toggle toggle-secondary" checked>
<input type="checkbox" class="toggle toggle-accent" checked>
<input type="checkbox" class="toggle toggle-info" checked>
<input type="checkbox" class="toggle toggle-success" checked>
<input type="checkbox" class="toggle toggle-warning" checked>
<input type="checkbox" class="toggle toggle-error" checked>
```

## 停用切換

```html
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>
```

## 用標籤切換

```html
<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-primary" checked>
  <span>Enable notifications</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-success" checked>
  <span>Dark mode</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-warning">
  <span>Analytics</span>
</label>
```

## 切換狀態

```html
<div class="flex gap-4 items-center">
  <div>
    <p class="text-sm font-medium mb-2">Off</p>
    <input type="checkbox" class="toggle toggle-primary">
  </div>
  <div>
    <p class="text-sm font-medium mb-2">On</p>
    <input type="checkbox" class="toggle toggle-primary" checked>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Disabled</p>
    <input type="checkbox" class="toggle toggle-primary" disabled>
  </div>
</div>
```