element/examples/docs/en-US/checkbox.md

Checkbox

A group of options for multiple choices.

Basic usage

Checkbox can be used alone to switch between two states.

:::demo Define v-model(bind variable) in el-checkbox. The default value is a Boolean for single checkbox, and it becomes true when selected.

<template>
  <!-- `checked` should be true or false -->
  <el-checkbox v-model="checked">Option</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

:::

Disabled State

Disabled state for checkbox.

::: demo Set the disabled attribute.

<template>
  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>
  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked1: false,
        checked2: true
      };
    }
  };
</script>

:::

Checkbox group

It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.

:::demo checkbox-group element can manage multiple checkboxes in one group by using v-model which is bound as an Array. label can modify the description following the button of the checkbox. It is also the value of the checkbox. label corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="Option A"></el-checkbox>
    <el-checkbox label="Option B"></el-checkbox>
    <el-checkbox label="Option C"></el-checkbox>
    <el-checkbox label="disabled" disabled></el-checkbox>
    <el-checkbox label="selected and disabled" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['selected and disabled','Option A']
      };
    }
  };
</script>

:::

Indeterminate

The indeterminate property can help you to achieve a 'check all' effect.

:::demo

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
  export default {
    data() {
      return {
        checkAll: true,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: false
      };
    },
    methods: {
      handleCheckAllChange(event) {
        this.checkedCities = event.target.checked ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

:::

Checkbox Attributes

Attribute	Description	Type	Options	Default
label	value of the checkbox when used inside a checkbox-group	string	—	—
true-label	value of the checkbox if it's checked	string, number	—	—
false-label	value of the checkbox if it's not checked	string, number	—	—
name	native 'name' attribute	string	—	—
disabled	if the checkbox is disabled	boolean	—	false
checked	if the checkbox is checked	boolean	—	false
indeterminate	same as indeterminate in native checkbox	boolean	—	false

Checkbox-group Events

Event Name	Description	Parameters
change	triggers when the binding value changes	Event object