多选框 Checkbox

对应 Arco Checkbox：选中时标签保持主要文字色，悬停时显示圆形背景。 属性用法见 Element Plus 文档。

基础与状态

选中、半选和禁用状态对应 Arco Checkbox。

VueReactPartialDisabled

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['Vue'])
</script>

<template>
  <el-checkbox-group v-model="value">
    <el-checkbox value="Vue">Vue</el-checkbox>
    <el-checkbox value="React">React</el-checkbox>
    <el-checkbox value="Partial" indeterminate>Partial</el-checkbox>
    <el-checkbox value="Disabled" disabled>Disabled</el-checkbox>
  </el-checkbox-group>
</template>

按钮组

Arco 没有复选按钮组，这里按 Arco 单选按钮组风格延伸。

LondonParisTokyo

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['London'])
</script>

<template>
  <el-checkbox-group v-model="value">
    <el-checkbox-button value="London">London</el-checkbox-button>
    <el-checkbox-button value="Paris">Paris</el-checkbox-button>
    <el-checkbox-button value="Tokyo">Tokyo</el-checkbox-button>
  </el-checkbox-group>
</template>

尺寸与边框

Arco 没有独立复选框尺寸和边框形态，这里保留 Element Plus 的配置语义。

SmallDefaultLargeBorder

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>

<template>
  <el-checkbox v-model="value" size="small">Small</el-checkbox>
  <el-checkbox v-model="value">Default</el-checkbox>
  <el-checkbox v-model="value" size="large">Large</el-checkbox>
  <el-checkbox v-model="value" border>Border</el-checkbox>
</template>

与 Arco 的差异

• 按钮组、独立复选框的尺寸和 border 没有 Arco 对应项，按 Arco 风格延伸或保留 Element Plus 形态。