Checkbox
Installation
import { Checkbox } from "@olab/components";Overview
方形勾選框，有未勾、已勾、部分勾選（indeterminate）三種狀態，sm 與 lg 兩種尺寸。勾選後整格填滿品牌色。
勾選要按下確認或送出後才生效；點下去立刻生效的設定請用 Switch。
Interactive Demo
TOGGLE — click to change checked state
terms = false · newsletter = true · indeterminate = indeterminate
State Matrix
STATE × SIZE — static snapshot
state
sm
lg
unchecked
checked
indeterminate
unchecked · hover (sim)
checked · hover (sim)
disabled
disabled + checked
disabled + indeterminate
Examples
WITHOUT LABEL — pure control sizing
sm
lg
Spec
| Part | Value | Source class |
|---|---|---|
| Box size | sm 16px · lg 20px（沒有 md） | w-4 h-4 / w-5 h-5 |
| Box radius | 1px | rounded-[1px] |
| Box padding | 2px | p-0.5 |
| Border · unchecked | 1px | data-[state=unchecked]:border-primary |
| Border · unchecked hover | 品牌色 | hover:border-[var(--color-bg-brand-solid)] |
| Border · unchecked disabled | 淡框 | data-disabled:border-secondary |
| Fill · checked / indeterminate | 品牌色，無邊框 | bg-brand-solid |
| Fill · checked hover | 品牌色 hover 階 | hover:bg-brand-solid-hover |
| Fill · checked disabled | 品牌淡色 | data-disabled:bg-brand-disable |
| Check icon | sm 12px · lg 14px | check2 / minus2 |
| Label | 14px（bodyM），disabled 轉淡 | text-bodyM text-primary / text-quaternary! |
| Box ↔ label | 8px | gap-2 |
數值為 2026-06-10 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/checkbox.md。
Usage
Do
- 多選、同意條款、設定開關清單用 Checkbox；一般列表用 sm，需要更大點擊範圍時用 lg。
- 「全選」底下只勾了一部分時，用 indeterminate（橫線）表示。
- label 直接寫在元件裡，讓點文字也能勾選。
Don't
- 不要用 Checkbox 做「立即生效」的開關；那是 Switch 的工作。
- 不要在一組互斥選項（只能選一個）用 Checkbox。
- 不要用 className 改方框圓角或尺寸；只有 sm / lg 兩階。
Links
- Measured spec
- live-ds-spec/checkbox.md