跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Toggle Component

CSS-only Tailwind CSS toggle switch with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

切換組件是二進位開關，可讓使用者開啟和關閉功能或設定。切換使用本機 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顏色錯誤語意顏色

基本用法

1
2
<input type="checkbox" class="toggle">
<input type="checkbox" class="toggle" checked>

1
2
<input type="checkbox" className="toggle">
<input type="checkbox" className="toggle" checked>

切換尺寸

html 
1
2
3
4
5
<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 
1
2
3
4
5
6
7
8
<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 
1
2
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>

用標籤切換

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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>

切換狀態

Off

On

Disabled

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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>