Skies.ui元件 (Components)
Toggle 開關
Skies.ui Toggle：Radix Switch 二元開關，role=switch、checked 與主題 primary；設定與表單用法。
Toggle 開關
Toggle 是 Radix Switch 的樣式封裝：語意為 role="switch"，狀態用 checked / defaultChecked / onCheckedChange 控制。開啟時軌道使用 bg-primary，關閉時為 bg-input。
預設用法
import { Toggle } from "@skies-ui/ui";
export function NotifyRow() {
return (
<label
htmlFor="notify"
className="flex cursor-pointer items-center justify-between gap-3 text-sm font-medium"
>
<span>推播通知</span>
<Toggle id="notify" defaultChecked />
</label>
);
}請盡量用 label + htmlFor + id 把可見標籤與開關綁在一起；若沒有可見文字，請在 Toggle 上加 aria-label。
受控
受控範例請在應用程式內使用
useState 綁定 checked 與 onCheckedChange。"use client";
import * as React from "react";
import { Toggle } from "@skies-ui/ui";
export function ControlledToggle() {
const [on, setOn] = React.useState(false);
return (
<Toggle checked={on} onCheckedChange={setOn} aria-label="深色模式" />
);
}停用
<Toggle disabled defaultChecked aria-label="唯讀開關" />與表單
在 <form> 中可傳 name，送出時會以開關狀態送出欄位（Radix 行為與原生 checkbox 類似）。
API 摘要
| 項目 | 說明 |
|---|---|
checked / defaultChecked | 受控或非受控的開啟狀態 |
onCheckedChange | (checked: boolean) => void |
disabled | 停用互動 |
name / value / required | 表單整合（見 Radix Switch 文件） |
aria-label | 無可見標籤時必填（或搭配 aria-labelledby） |
底層為 @radix-ui/react-switch；套件匯出元件名為 Toggle 以符合產品用語（開關／切換）。