描邊核取方塊

勾選時勾號沿著筆劃描邊畫出、方塊在狀態變化瞬間微縮再以彈簧回彈的核取方塊。半選（indeterminate）橫線與勾號是同一條路徑，兩者之間平滑變形而不是直接替換。搭配 DrawnCheckbox.Group 可以做出帶「全選」列的清單：全選列自動計算勾選／半選，一次勾滿或清空時各項依畫面順序錯開動畫。單一核取方塊與群組都支援受控／非受控雙模式。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<DrawnCheckbox/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/drawn-checkbox.json

使用

import { DrawnCheckbox } from "@/components/ui/drawn-checkbox";

// 單一核取方塊（非受控）
<DrawnCheckbox label="接受服務條款" description="勾選後才能繼續下一步" />

// 群組 + 全選列
const [done, setDone] = React.useState<string[]>(["reply"]);

<DrawnCheckbox.Group value={done} onValueChange={setDone} aria-label="今日待辦">
  <DrawnCheckbox selectAll label="全選" />
  <DrawnCheckbox value="reply" label="回覆客戶信件" />
  <DrawnCheckbox value="report" label="整理第三季報表" />
  <DrawnCheckbox value="dentist" label="預約牙醫" description="已轉交給同事" disabled />
</DrawnCheckbox.Group>

Props

DrawnCheckbox.Group

細節

• 勾號是一條自繪 SVG 路徑，用 pathLength 從 0 描到 1（時長 = duration、easeOut）；取消勾選時以一半時長收回。
• 勾號與半選橫線都是「三個點」的路徑，d 屬性逐數字插值，所以勾 ↔ 橫線是平滑變形；從未勾選直接進入半選時，路徑先就位再描邊。
• 方塊在每次狀態變化時先縮到 0.9，再以 spring（stiffness 500、damping 25）彈回。
• 群組內的「全選」列只計算未停用的項目：全部勾選顯示勾、部分勾選顯示半選；點擊時只改動未停用項，停用項維持原狀。全選或清空時，真正改變狀態的項目依 DOM 順序延遲 i × stagger 毫秒；單項切換不延遲。
• 色彩過渡時長讀取 --wb-drawn-checkbox-duration（預設 180ms）；有傳 duration 時會同步覆寫這個變數，讓顏色與描邊同時完成。
• 在 Group 內時，子項的勾選狀態由 Group 的 value 控制，checked／defaultChecked 會被忽略。

可及性

• 方塊是 button，帶 role="checkbox" 與 aria-checked（true／false／mixed）；標籤以 aria-labelledby、說明以 aria-describedby 關聯
• 點擊標籤也會切換；鍵盤以 Space 切換，Enter 不切換，與原生 checkbox 一致
• 鍵盤焦點顯示 focus-visible 外框；停用時設定 disabled，無法聚焦與切換
• 群組根元素為 role="group"，可用 aria-labelledby 或 aria-label 命名
• 使用者系統開啟「減少動態效果」時，不描邊、不縮放、不錯開，勾號以 100ms 淡入直接出現