Skip to content

checkbox

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

checkbox

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.js
index.js
 
 
index.less
index.less
 
 

README.md

Checkbox

Install

import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';

Vue.use(Checkbox).use(CheckboxGroup);

Usage

Basic Usage

<van-checkbox v-model="checked">Checkbox</van-checkbox>
export default {
  data() {
    return {
      checked: true
    };
  }
};

Disabled

<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>

Custom Color

<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>

Custom Icon

Use icon slot to custom icon

<van-checkbox v-model="checked">
  Custom Icon
  <img
    slot="icon"
    slot-scope="props"
    :src="props.checked ? icon.active : icon.inactive"
  >
</van-checkbox>
export default {
  data() {
    checked: true,
    icon: {
      active: 'https://img.yzcdn.cn/vant/user-active.png',
      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
    }
  }
}

Checkbox Group

When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.

<van-checkbox-group v-model="result">
  <van-checkbox
    v-for="(item, index) in list"
    :key="item"
    :name="item"
  >
    Checkbox {{ item }}
  </van-checkbox>
</van-checkbox-group>
export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      result: ['a', 'b']
    };
  }
};

Maximum amount of checked options

<van-checkbox-group v-model="result" :max="2">
  <van-checkbox
    v-for="(item, index) in list"
    :name="item"
    :key="item"
  >
    Checkbox {{ item }}
  </van-checkbox>
</van-checkbox-group>

Inside a Cell

<van-checkbox-group v-model="result">
  <van-cell-group>
    <van-cell
      v-for="(item, index) in list"
      clickable
      :key="item"
      :title="`Checkbox ${item}`"
      @click="toggle(index)"
    >
      <van-checkbox
        :name="item"
        ref="checkboxes"
        slot="right-icon"
      />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>
export default {
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    }
  }
}

API

Checkbox Props

Attribute Description Type Default
name Checkbox name any -
shape Can be set to square string round
v-model Check status boolean false
disabled Diable checkbox boolean false
icon-size Icon size `string number`
label-disabled Whether to disable label click boolean false
label-position Can be set to left string right
checked-color Checked color string #1989fa

CheckboxGroup Props

Attribute Description Type Default
v-model Names of all checked checkboxes any[] -
disabled Disable all checkboxes boolean false
max Maximum amount of checked options number 0(Unlimited)

Checkbox Events

Event Description Parameters
change Triggered when value changed current value
click Triggered when click checkbox event: Event

CheckboxGroup Events

Event Description Parameters
change Triggered when value changed current value

Checkbox Slots

Name Description SlotProps
default Custom label -
icon Custom icon checked: whether to be checked

Checkbox Methods

Use ref to get checkbox instance and call instance methods

Name Attribute Return value Description
toggle - - Toggle check status