Checkbox 多选框

用于表达可独立选择的选项，也可以把多个复选框绑定到同一个数组来管理多选结果。

基础用法

我已阅读并同意服务条款正在保存选择 全选项目

设计前端质量

<template>
  <div class="checkbox-demo">
    <AuCheckbox v-model="accepted">我已阅读并同意服务条款</AuCheckbox>
    <AuCheckbox :model-value="true" loading>正在保存选择</AuCheckbox>
    <AuCheckbox
      :model-value="allSelected"
      :indeterminate="partiallySelected"
      @update:model-value="toggleAll"
    >
      全选项目
    </AuCheckbox>
    <div class="checkbox-demo__options">
      <AuCheckbox
        v-for="option in options"
        :key="option.value"
        v-model="selected"
        :value="option.value"
      >
        {{ option.label }}
      </AuCheckbox>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { AuCheckbox } from 'aurora-plus';
const accepted = ref(false);
const options = [
  { value: 'design', label: '设计' },
  { value: 'frontend', label: '前端' },
  { value: 'qa', label: '质量' },
];
const selected = ref(['design']);
const allSelected = computed(() => selected.value.length === options.length);
const partiallySelected = computed(() => selected.value.length > 0 && !allSelected.value);
function toggleAll(checked) {
  selected.value = checked ? options.map((option) => option.value) : [];
}
</script>
<style scoped>
.checkbox-demo {
  display: grid;
  gap: 12px;
}
.checkbox-demo__options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-left: 25px;
}
</style>

Checkbox API

Attributes

属性	说明	类型	默认值
modelValue	当前值；传数组时启用多选模式	boolean / array	false
value	数组模式下当前选项的值	string / number / boolean / object	true
trueValue	非数组模型选中时写入的值	boolean / string / number	true
falseValue	非数组模型取消时写入的值	boolean / string / number	false
label	复选框文字	string	''
name	原生表单名称	string	''
indeterminate	是否显示半选状态	boolean	false
size	控件尺寸	string	default
disabled	是否禁用	boolean	false
loading	是否处于加载中；开启时不可切换	boolean	false

Events

事件名	说明	参数
update:modelValue	选择状态变化后更新绑定值	(value)
change	原生 change 事件处理完成后触发	(value, event)

Slots

插槽名	说明
default	自定义复选框文字；存在时优先于 label