Select multiple options from a group.

Basic Usage

Used alone, it represents switching between two states. The content written in the label is the description after the checkbox button.

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

Disabled State

Disabled state of Checkbox.

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

Checkbox Group

Use this when multiple checkboxes are bound to the same array. Checked state indicates the selected items in the option group.

<template>
  <fx-checkbox-group v-model="checkList">
    <fx-checkbox label="Checkbox A"></fx-checkbox>
    <fx-checkbox label="Checkbox B"></fx-checkbox>
    <fx-checkbox label="Checkbox C"></fx-checkbox>
    <fx-checkbox label="Disabled" disabled></fx-checkbox>
    <fx-checkbox label="Checked and Disabled" disabled></fx-checkbox>
  </fx-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['Checked and Disabled','Checkbox A']
      };
    }
  };
</script>

Indeterminate State

The indeterminate property indicates an uncertain checkbox state and is usually used to implement select-all behavior.

<template>
  <fx-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Select All</fx-checkbox>
  <div style="margin: 15px 0;"></div>
  <fx-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <fx-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</fx-checkbox>
  </fx-checkbox-group>
</template>
<script>
  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['Shanghai', 'Beijing'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? 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>

Limit on Selectable Items

Use the min and max properties to limit the number of items that can be checked.

<template>
  <fx-checkbox-group 
    v-model="checkedCities"
    :min="1"
    :max="2">
    <fx-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</fx-checkbox>
  </fx-checkbox-group>
</template>
<script>
  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
  export default {
    data() {
      return {
        checkedCities: ['Shanghai', 'Beijing'],
        cities: cityOptions
      };
    }
  };
</script>

Button Style

A checkbox group in button style.

<template>
  <div>
    <fx-checkbox-group v-model="checkboxGroup1">
      <fx-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</fx-checkbox-button>
    </fx-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <fx-checkbox-group v-model="checkboxGroup2" size="medium">
      <fx-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</fx-checkbox-button>
    </fx-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <fx-checkbox-group v-model="checkboxGroup3" size="small">
      <fx-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</fx-checkbox-button>
    </fx-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <fx-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
      <fx-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</fx-checkbox-button>
    </fx-checkbox-group>
  </div>
</template>
<script>
  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
  export default {
    data () {
      return {
        checkboxGroup1: ['Shanghai'],
        checkboxGroup2: ['Shanghai'],
        checkboxGroup3: ['Shanghai'],
        checkboxGroup4: ['Shanghai'],
        cities: cityOptions
      };
    }
  }
</script>

With Border

<template>
  <div>
    <fx-checkbox v-model="checked1" label="Option 1" border></fx-checkbox>
    <fx-checkbox v-model="checked2" label="Option 2" border></fx-checkbox>
  </div>
  <div style="margin-top: 20px">
    <fx-checkbox v-model="checked3" label="Option 1" border size="medium"></fx-checkbox>
    <fx-checkbox v-model="checked4" label="Option 2" border size="medium"></fx-checkbox>
  </div>
  <div style="margin-top: 20px">
    <fx-checkbox-group v-model="checkboxGroup1" size="small">
      <fx-checkbox label="Option 1" border></fx-checkbox>
      <fx-checkbox label="Option 2" border disabled></fx-checkbox>
    </fx-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <fx-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
      <fx-checkbox label="Option 1" border></fx-checkbox>
      <fx-checkbox label="Option 2" border></fx-checkbox>
    </fx-checkbox-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        checked1: true,
        checked2: false,
        checked3: false,
        checked4: true,
        checkboxGroup1: [],
        checkboxGroup2: []
      };
    }
  }
</script>

Checkbox Attributes

Parameter	Description	Type	Optional Values	Default	PC/Mobile Support
value / v-model	Bound value	string / number / boolean	-	-	PC/Mobile
label	Value of the checked state (only enabled in checkbox-group or when the bound object type is array)	string / number / boolean	-	-	PC/Mobile
true-label	Value when checked	string / number	-	-	PC only
false-label	Value when unchecked	string / number	-	-	PC only
disabled	Whether disabled	boolean	-	false	PC/Mobile
border	Whether to show a border	boolean	-	false	PC only
size	Size of Checkbox; only enabled when border is true	string	medium / small / mini	-	PC only
name	Native name attribute	string	-	-	PC only
checked	Whether currently checked	boolean	-	false	PC only
indeterminate	Sets the indeterminate state; only controls the style	boolean	-	false	PC only

Checkbox Events

Event Name	Description	Callback Parameters	PC/Mobile Support
change	Triggered when the bound value changes	Updated value	PC/Mobile

Checkbox-group Attributes

Parameter	Description	Type	Optional Values	Default	PC/Mobile Support
value / v-model	Bound value	array	-	-	PC/Mobile
size	Checkbox group size; only enabled for button-style Checkbox or bordered Checkbox	string	medium / small / mini	-	PC only
disabled	Whether disabled	boolean	-	false	PC/Mobile
min	Minimum number of checkboxes that can be checked	number	-	-	PC only
max	Maximum number of checkboxes that can be checked	number	-	-	PC/Mobile
text-color	Text color when button-style Checkbox is active	string	-	#ffffff	PC only
fill	Fill and border color when button-style Checkbox is active	string	-	#409EFF	PC only

Checkbox-group Events

Event Name	Description	Callback Parameters	PC/Mobile Support
change	Triggered when the bound value changes	Updated value	PC/Mobile

Checkbox-button Attributes

Parameter	Description	Type	Optional Values	Default	PC/Mobile Support
label	Value of the checked state (only enabled in checkbox-group or when the bound object type is array)	string / number / boolean	-	-	PC/Mobile
true-label	Value when checked	string / number	-	-	PC only
false-label	Value when unchecked	string / number	-	-	PC only
disabled	Whether disabled	boolean	-	false	PC/Mobile
name	Native name attribute	string	-	-	PC only
checked	Whether currently checked	boolean	-	false	PC only