Skies.ui元件 (Components)
Checkbox 核取方塊
Skies.ui Checkbox：Radix 核取方塊，螢幕閱讀器友善，與 Label、表單組合；用法與範例。
Checkbox 核取方塊
Checkbox 基於 Radix Checkbox：勾選時為 bg-primary 與 text-primary-foreground，未勾選時邊框與 Input 一樣使用 border-input。
與標籤並列
將 Checkbox 與 Label 用 htmlFor / id 連結。第一行用 flex items-center gap-2，方塊與標題會落在同一橫列；若有說明文字，另起一行並以 ps-6（約等於方塊寬度 + gap-2）與標題左緣對齊。
可點文字或方塊切換；鍵盤以 Space 切換。
import { Checkbox, Label } from "@skies-ui/ui";
<div className="grid gap-1">
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms" className="cursor-pointer leading-none">
我同意服務條款
</Label>
</div>
<p className="ps-6 text-sm text-muted-foreground">說明文字可放這裡。</p>
</div>受控與表單
- 非受控：
defaultChecked。 - 受控：
checked+onCheckedChange（值為boolean或"indeterminate"）。 - 在
<form>內可傳name，送出行為與 Radix 文件一致。
"use client";
import * as React from "react";
import { Checkbox } from "@skies-ui/ui";
export function Controlled() {
const [on, setOn] = React.useState(false);
return (
<Checkbox checked={on} onCheckedChange={setOn} aria-label="訂閱電子報" />
);
}停用與錯誤狀態
API 摘要
| 項目 | 說明 |
|---|---|
checked / defaultChecked | 受控或非受控 |
onCheckedChange | 回呼參數為 boolean 或 "indeterminate" |
disabled | 停用 |
name / value / required | 表單整合 |
aria-invalid | 驗證樣式（邊框改為 destructive） |