Checkbox

# FxCheckbox Checkbox

Multiple selection among a set of options

# Basic Usage

Can be used alone to toggle between two states. The content within the tag serves as the description following the checkbox button.

Option

Define v-model binding variable in el-checkbox element. For a single checkbox, the default bound variable value will be Boolean, where true indicates selected state.

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

Copy

# Disabled State

Disabled state of checkbox.

Option 1

Option 2

Set the disabled attribute.

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

Copy

# Checkbox Group

Suitable for scenarios where multiple checkboxes are bound to the same array, using checked state to indicate selected items.

The checkbox-group element can manage multiple checkboxes as a group. Just bind an Array type variable using v-model in the Group. The label attribute of el-checkbox represents the corresponding value of the checkbox. If no content exists within the tag, this attribute also serves as the description following the checkbox button. The label corresponds to elements in the array - if the specified value exists, it's selected; otherwise unselected.

<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="Selected & Disabled" disabled></fx-checkbox>
  </fx-checkbox-group>
</template>

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

Copy

# Indeterminate State

The indeterminate property indicates an indeterminate state of checkbox, typically used to implement select-all functionality.

Select All

Shanghai

Beijing

Guangzhou

Shenzhen

<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>

Copy

# Selection Limit

Use min and max properties to limit the number of selectable items.

Shanghai

Beijing

Guangzhou

Shenzhen

<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>

Copy

# Button Style

Checkbox group with button style.

Shanghai

Beijing

Guangzhou

Shenzhen

Shanghai

Beijing

Guangzhou

Shenzhen

Shanghai

Beijing

Guangzhou

Shenzhen

Shanghai

Beijing

Guangzhou

Shenzhen

Simply replace el-checkbox elements with el-checkbox-button elements. Additionally, Element provides size property.

<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>

Copy

# With Border

Set the border property to render checkbox 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>

Copy

# Checkbox Attributes

Attribute	Description	Type	Options	Default	PC/Mobile Support
value / v-model	binding value	string / number / boolean	—	—	PC/Mobile
label	value when selected (only works when inside `checkbox-group` or bound to array type)	string / number / boolean	—	—	PC/Mobile
true-label	value when selected	string / number	—	—	PC Only
false-label	value when not selected	string / number	—	—	PC Only
disabled	whether disabled	boolean	—	false	PC/Mobile
border	whether to show border	boolean	—	false	PC Only
size	checkbox size, works 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	controls indeterminate state, affects style only	boolean	—	false	PC Only

# Checkbox Events

Event Name	Description	Callback Parameters	PC/Mobile Support
change	triggers when binding value changes	updated value	PC/Mobile

# Checkbox-group Attributes

Attribute	Description	Type	Options	Default	PC/Mobile Support
value / v-model	binding value	array	—	—	PC/Mobile
size	checkbox group size, works for button-style or bordered checkboxes	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 color 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	triggers when binding value changes	updated value	PC/Mobile

# Checkbox-button Attributes

Attribute	Description	Type	Options	Default	PC/Mobile Support
label	value when selected (only works when inside `checkbox-group` or bound to array type)	string / number / boolean	—	—	PC/Mobile
true-label	value when selected	string / number	—	—	PC Only
false-label	value when not selected	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

← Radio Input→