Checkbox 复选框

多选控件，支持单独使用或以 Group 批量管理，内置半选（indeterminate）状态。

基础用法

同意服务协议

当前状态：未勾选

基础复选框，绑定 v-model

vue

<template>
  <div>
    <ACheckbox v-model="checked">同意服务协议</ACheckbox>
    <p style="margin-top: 8px; font-size: 13px; color: #888">当前状态：{{ checked ? '已勾选' : '未勾选' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ACheckbox } from '@lite-code/aui-vue'

const checked = ref(false)
</script>

禁用状态

禁用未选中禁用已选中

禁用未选中与禁用已选中

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <ACheckbox disabled>禁用未选中</ACheckbox>
    <ACheckbox :model-value="true" disabled>禁用已选中</ACheckbox>
  </div>
</template>

<script setup lang="ts">
import { ACheckbox } from '@lite-code/aui-vue'
</script>

复选框组

通过 ACheckboxGroup 批量管理多个复选框，options 配置选项列表。

苹果香蕉橙子葡萄

已选：无

复选框组，v-model 绑定选中值数组

vue

<template>
  <div>
    <ACheckboxGroup v-model="value" :options="options" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">已选：{{ value.join(', ') || '无' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ACheckboxGroup } from '@lite-code/aui-vue'

const value = ref<(string | number)[]>([])
const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
  { label: '橙子', value: 'orange' },
  { label: '葡萄', value: 'grape', disabled: true },
]
</script>

全选 / 半选

利用 indeterminate prop 实现全选联动效果。

全选

苹果香蕉橙子

已选：无

indeterminate 半选状态 + 全选联动

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <ACheckbox
      :model-value="checkAll"
      :indeterminate="indeterminate"
      @change="onCheckAll"
      >全选</ACheckbox
    >
    <ACheckboxGroup v-model="value" :options="options" />
    <p style="font-size: 13px; color: #888">
      已选：{{ value.join(", ") || "无" }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { ACheckbox, ACheckboxGroup } from "@lite-code/aui-vue";

const options = [
  { label: "苹果", value: "apple" },
  { label: "香蕉", value: "banana" },
  { label: "橙子", value: "orange" },
];
const allValues = options.map((o) => o.value);
const value = ref<string[]>([]);

const checkAll = computed(() => value.value.length === allValues.length);
const indeterminate = computed(
  () => value.value.length > 0 && value.value.length < allValues.length
);

function onCheckAll(checked: boolean) {
  value.value = checked ? [...allValues] : [];
}
</script>

API

ACheckbox Props

属性	类型	默认值	说明
modelValue	boolean	—	受控选中状态
defaultChecked	boolean	false	非受控初始选中状态
indeterminate	boolean	false	半选状态（不确定）
size	'sm' | 'md' | 'lg'	'md'	尺寸
disabled	boolean	false	禁用
value	string | number	—	在 Group 中的值标识

ACheckbox Events

事件名	回调参数	说明
update:modelValue	(checked: boolean)	选中状态变更
change	(checked: boolean)	选中状态变更

ACheckboxGroup Props

属性	类型	默认值	说明
modelValue	(string | number)[]	—	受控选中值数组
defaultValue	(string | number)[]	[]	非受控初始选中值数组
options	CheckboxOption[]	[]	选项列表
disabled	boolean	—	整组禁用

CheckboxOption

属性	类型	说明
label	string	显示文字
value	string | number	值
disabled	boolean	是否禁用