以原生 HTML 核取方塊為基礎所產生的 CSS 切換開關，能保留內建的鍵盤啟動、焦點行為與表單提交功能，因為視覺樣式僅取代了預設核取方塊的繪製方式，而底層的輸入元素仍保有其語意。CSS 切換開關產生器接收七項可量測的輸入——軌道寬度、軌道高度、內距、轉場時間、關閉顏色、開啟顏色與旋鈕顏色——並輸出同步的 CSS 與 HTML，可直接貼到專案中。幾何形狀由兩個透明的方程式決定：旋鈕直徑等於軌道高度減去兩倍內距，而開啟狀態的位移距離等於軌道寬度減去軌道高度。由於這兩個方程式都會顯示在所產生的像素宣告中，無需開啟任何元件庫即可檢視最終形狀。一切都在瀏覽器中執行，因此在調整預覽時不會上傳任何設定或標記。
產生器在原生核取方塊外建構了什麼
其輸出是一個樣式化的核取方塊，而非裝飾用的 div，這也是該控制項仍可搭配鍵盤與螢幕閱讀器使用的原因。根據 MDN 對於 appearance 屬性的參考說明，設定 appearance: none 會移除平台的核取方塊繪製樣式，但保留輸入元素本身。原生元素仍會持續公開其勾選狀態、空白鍵啟動、焦點外框與提交語意，因此無需 JavaScript 也能建立可存取的切換開關，也不必手動重新實作這些行為。在所產生的標記中，輸入元素仍巢狀嵌於可見的標籤文字內，這代表整個標籤區域都可點擊，且控制項帶有可存取名稱。
該標籤是切換開關背後與人類之間的約定。切換開關僅在標籤設定確實為二元時才適合出現——例如電子郵件通知或深色模式——因為切換開關代表一種對應單一表單值的持續開啟／關閉狀態。當動作是一次性的（儲存、提交），或使用者要在三個或以上的選項中擇一時，使用其他控制項會更為精確，強行使用切換開關反而會模糊其模型。
輸入限制與幾何方程式
此工具透過純粹的邏輯拒絕無效組合，而不會靜默地產生逸出軌道或負值的旋鈕。可接受的範圍既小到足以預先規劃，也寬到足以涵蓋大多數設計系統。
| 輸入 | 可接受範圍或格式 | 限制存在的原因 |
|---|---|---|
| 軌道寬度 | 36–120 px（整數像素） | 界定可用的切換開關尺寸，並為開啟狀態的位移保留餘裕 |
| 軌道高度 | 20–64 px（整數像素） | 定義舒適的觸控範圍，並與寬度限制相互搭配 |
| 內距 | 2–8 px | 必須確保軌道內留有正值大小的旋鈕 |
| 轉場時間 | 0–2000 ms（整數毫秒） | 設為 0 可移除可見的動畫；上限則確保預覽保持靈敏 |
| 關、開與旋鈕顏色 | 完整的六位數 HEX | 拒絕簡寫格式，使幾何與顏色皆保持可預測 |
寬度必須至少比高度多出八個像素，以確保開啟與關閉位置在視覺上有明顯區隔。其餘形狀則由兩個方程式決定：
旋鈕大小 = 軌道高度 − 2 × 內距 開啟狀態位移 = 軌道寬度 − 軌道高度
以寬度 64、高度 32、內距 4 的切換開關為例，旋鈕直徑為 32 − 8 = 24 px，勾選狀態的位移則為 64 − 32 = 32 px。驗證版面：內距（4）加上旋鈕（24）加上位移（32）合計為 60，符合寬度減去內距（64 − 4 = 60）的結果。因此相同的內距會出現在軌道的兩端。這些數值會直接寫入像素宣告中，檢閱者可用肉眼檢查運算結果。軌道為膠囊形狀，其圓角半徑等於自身高度的一半；圓形的 ::after 旋鈕則以自身大小的一半作為半徑；背景顏色與 transform 皆共用所選的轉場時間，並搭配 ease 時間函式關鍵字。
三步驟產生切換開關
- 在控制項中調整軌道寬度、軌道高度、內距、轉場時間、關閉顏色、開啟顏色與旋鈕顏色，可透過點擊軌道或標籤切換即時預覽，使兩種狀態能同時顯示。
- 使用複製 CSS 與複製 HTML 動作，分別取得兩段程式碼片段。將範例的標籤文字替換為產品實際公開的二元設定，例如電子郵件通知或深色模式，讓控制項具有有意義的可存取名稱。
- 在實際頁面中驗證結果：狀態用語、Tab 與空白鍵的鍵盤操作、對頁面背景的焦點對比、在 200% 縮放下的行為、強制色彩與高對比模式中的外觀、對減少動畫偏好的回應，以及由周邊產品處理的狀態保存行為。
片段本身之外的可存取性檢查
焦點可見的外框會保留在原生輸入元素上，沿用所選的開啟顏色，並自軌道向外偏移而非被移除。由於外框顏色是針對切換開關進行調整，但實際繪製於真實的頁面背景上，請務必在該處驗證對比——在白色預覽上看起來清晰的色調，在深色主題中可能會消失。開啟與關閉狀態必須能以顏色以外的方式區分；若相鄰的標籤無法讓狀態顯而易見，請新增明確的狀態文字（如 開／關），或仰賴旋鈕在勾選狀態下明顯不同的位置。
鍵盤使用者應能透過 Tab 切換至該控制項，並按下空白鍵進行切換。整合後請重新測試，特別是當切換開關與框架狀態連動時：checked 與 onChange 之間的不一致，可能會在無聲無息間破壞原生互動。螢幕閱讀器的朗讀內容取決於標籤是否與輸入元素關聯，而所產生的標記會保留此關聯。觸控目標應保持舒適，雖然高度範圍已圍繞適當的指頭大小控制項來設計，但在標籤區域周圍增加額外的可點擊內距，仍是合理的緩衝作法。
減少動畫是另一個獨立的考量。在產生器中將時間設為 0 即可移除可見的轉場效果；此外，也可以在目的地的樣式表中加入 prefers-reduced-motion 媒體查詢，將 transition-duration 覆寫為 0。針對該模式的詳細說明，請參閱從產生的 CSS 切換開關中移除轉場效果指南。
框架整合與狀態處理
由於基本的核取方塊狀態不需要 JavaScript，所產生的程式碼片段中不含任何 JavaScript。在 React、Vue、Svelte 或任何掌管 DOM 更新的框架中，您可能需要將 class 改為 className，並確認受控狀態的接線不會與原生核取方塊相互衝突。若 checked 繫結至狀態變數，而 onChange 會更新該變數，空白鍵的啟動仍應正常傳遞；但若同時呼叫 event.preventDefault，或將輸入元素替換為自訂元素，原生語意將面臨風險，此時實際上等同於重建了一個非原生的小工具，必須進行完整的 ARIA 狀態同步——而這是本工具並未提供的功能。
當狀態變更會觸發網路操作時，請勿讓視覺上的切換開關承諾伺服器尚未確認的結果。可繪製待處理狀態（例如停用輸入元素或加入應用程式內的指示器），並於請求失敗時還原或重試。產生器刻意僅止步於外觀與原生互動：狀態保存、待處理工作與錯誤復原，屬於使用此控制項之應用程式的職責。
複製程式碼後的三項常見調整
片段進入實際樣式表後，常見三項調整。首先，當應為受影響的使用者移除動畫時，請以 prefers-reduced-motion 媒體查詢覆寫 transition-duration。其次，將標籤文字由預留位置的 啟用功能 替換為產品實際公開的二元設定；標籤即為可存取名稱，精確的措辭能讓螢幕閱讀器與點擊目標保持一致。第三，請另行定義 disabled、invalid 或 read-only 的呈現方式——產生器並未提供這些狀態，而設定畫面應讓已停用的控制項易於理解，同時讓任何說明或錯誤文字與該欄位保持關聯。
當目的頁面使用會鎖定所有輸入元素的 CSS（全域重設、框架預設或主題）時，請檢查層疊順序，以確保切換開關的規則在相同的特定性下仍可生效。若專案範圍的規則重設了 appearance，產生器的 appearance: none 仍然有效；若專案範圍的規則覆寫了輸入元素的 border-radius 或 transition-duration，則可能需要提高特定性，或將切換開關樣式移至層疊中的適當位置。最後，請確認在強制色彩模式下，開啟與關閉狀態仍可區分；該模式下瀏覽器會以系統調色盤取代頁面色彩，可能會壓平所選的軌道色調。
延伸閱讀：使用 CSS 三角形產生器時如何選擇顏色。