Switch
Installation
import { Switch } from "@olab/components";Overview
開關：點一下立刻切換開 / 關，有 md（20 × 40px，預設）與 sm（16 × 28px）兩種尺寸。開啟時軌道填品牌色，白色圓點滑到右邊。
Switch 代表「立刻生效」的設定；要按送出才生效的選項請用 Checkbox。
Interactive Demo
TOGGLE — click to flip
darkMode = false · notifications = true · autoSave = true
State Matrix
STATE × SIZE — static snapshot
state
md
sm
unchecked
checked
disabled
disabled + checked
沒有 hover、pressed 與 focus 的專屬樣式（見 Spec）。
Examples
WITHOUT LABEL — control only
Spec
| Part | Value | Source class |
|---|---|---|
| Track · md | 20 × 40px，內距 1px，膠囊形 | h-5 w-10 p-px rounded-full |
| Track · sm | 16 × 28px，內距 2px | h-4 w-7 p-0.5 |
| Track · off | 淡底 | data-[state=unchecked]:bg-secondary |
| Track · on | 品牌色 | data-[state=checked]:bg-brand-solid |
| Track · disabled | 跟頁面底色相同 | data-[disabled]:bg-primary! |
| Thumb | md 18px · sm 12px，白色圓點 | h-4.5 w-4.5 / size-3 · bg-[#fff] |
| Thumb · disabled | 淡灰 | data-[disabled]:bg-tertiary! |
| Label | 14px，disabled 轉淡 | text-sm text-primary / text-tertiary! |
| Track ↔ label | 8px | gap-2 |
| Hover / pressed / focus | 沒有定義 |
數值為 2026-06-10 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/switch.md。
Usage
Do
- 點了就立刻生效的設定：通知開關、自動儲存、介面偏好。
- label 寫成「這個設定是什麼」（Push notifications），不要寫成「開 / 關」。
- 設定清單用 md；空間很擠的列內用 sm。
Don't
- 不要拿 Switch 做要按送出才生效的選項；那是 Checkbox 的工作。
- 不要用 Switch 在兩個不同選項之間切換（例如 YES / NO）；請用 Tabs 或一排 Button。
- 不要用 className 改圓點或軌道顏色。
Links
- Measured spec
- live-ds-spec/switch.md