Checkbox

Matches Arco Checkbox with consistent label color and a circular hover background. See the Element Plus docs for props.

Basics & States

Checked, indeterminate and disabled states match 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>

Button Group

Arco has no checkbox button group; this extends the Arco radio-button style.

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>

Sizes & Border

Standalone sizes and borders have no Arco equivalent and retain Element Plus behavior.

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>

Differences from Arco

• Arco has no checkbox buttons, standalone sizes or border variant; these extend the theme or keep the Element Plus form.