Description

Checkbox 組件用於選擇多個選項或切換單一選項的狀態，支援 checked、unchecked 和 indeterminate 三種狀態。

基本用法

Basic Checkbox

Checked: false

Value: false

帶標籤

Checkbox with Label

Accept terms and conditions

Subscribe to newsletter

禁用狀態

Disabled Checkbox

Disabled unchecked

Disabled checked

不確定狀態

Indeterminate Checkbox

Select All

Option 1Option 2Option 3

Parent: false
Children: []

群組用法

Checkbox Group

Choose your interests

ProgrammingDesignMusicSports

Selected: [ "programming" ]

Choose colors (horizontal)

RedBlueGreenYellow

Selected: []

Choose languages (with disabled options)

JavaScriptPythonTypeScriptJavaGo

Selected: [ "javascript" ]

API

Checkbox 屬性

屬性名	說明	類型	默認值
modelValue	當前選中狀態	boolean | 'indeterminate' | null	-
value	複選框的值	any	-
name	表單名稱	string	-
disabled	是否禁用	boolean	false
required	是否必填	boolean	false
inputId	input 元素的 ID	string	-
inputClass	input 元素的 class	string	-
inputStyle	input 元素的樣式	StyleValue	-
binary	是否為二進位模式	boolean	false
indeterminate	是否為不確定狀態	boolean	false
label	標籤文字	string	-

CheckboxGroup 屬性

屬性名	說明	類型	默認值
modelValue	當前選中的值陣列	any[]	[]
options	選項陣列	(CheckboxOption | string)[]	[]
optionLabel	選項標籤的屬性名	string	'label'
optionValue	選項值的屬性名	string	'value'
optionDisabled	選項禁用狀態的屬性名	string	'disabled'
disabled	是否禁用整個群組	boolean	false
name	表單名稱	string	-
orientation	佈局方向	'horizontal' | 'vertical'	'vertical'
label	群組標籤	string	-

事件 Events

事件名	說明	回調參數
update:modelValue	更新模型值	(value: boolean | 'indeterminate' | null) => void
change	值變更事件	(event: Event) => void
focus	獲得焦點事件	(event: FocusEvent) => void
blur	失去焦點事件	(event: FocusEvent) => void

插槽 Slots

插槽名	說明
default	預設插槽
icon	圖示插槽