Checkbox 核取方塊

核取方塊用來切換布林值。勾選與混合狀態使用品牌色填色，並搭配深色勾選或減號圖示。

示範

基礎

綁定 checked，並以 e.detail.checked 監聽 change。

我同意

<gk-checkbox :checked="agree" @change="onAgree">我同意</gk-checkbox>

尺寸

尺寸列舉與 Button、Input 一致：sm、md、lg。

小中大

<gk-checkbox size="sm" checked>小</gk-checkbox>
<gk-checkbox size="md" checked>中</gk-checkbox>
<gk-checkbox size="lg" checked>大</gk-checkbox>

停用

disabled 會阻擋切換。

關開

<gk-checkbox disabled>關</gk-checkbox>
<gk-checkbox disabled checked>開</gk-checkbox>

不確定

indeterminate 會設定 aria-checked="mixed" 並顯示減號。點擊後會勾選並清除混合狀態。

全選

<gk-checkbox :checked="mixedChecked" :indeterminate="mixed" @change="onMixed">全選</gk-checkbox>

群組

gk-checkbox-group 的 change 帶有 string[] 的 e.detail.value。子項事件會在群組被攔截，以免 Vue 綁定讀到錯誤的 detail。

蘋果梨李

pear

<gk-checkbox-group :value="group" @change="onGroup">
  <gk-checkbox value="apple">蘋果</gk-checkbox>
  <gk-checkbox value="pear">梨</gk-checkbox>
  <gk-checkbox value="plum">李</gk-checkbox>
</gk-checkbox-group>

API

Checkbox Props

Prop	型別	預設值
checked	boolean	false
indeterminate	boolean	false
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'
value	string	''

Checkbox Events

名稱	說明
change	使用者切換；detail: { checked: boolean }

CheckboxGroup Props

Prop	型別	預設值
value	string[]	[]
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'

CheckboxGroup Events

名稱	說明
change	detail: { value: string[] }