/*! For license information please see 8853.6a566489.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["8853"],{59620:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Checkbox

\n

Intro

\n

A group of options for multiple choices.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Checkbox, CheckboxGroup } from 'vant';\n\nconst app = createApp();\napp.use(Checkbox);\napp.use(CheckboxGroup);\n
\n

Usage

\n

Basic Usage

\n
<van-checkbox v-model="checked">Checkbox</van-checkbox>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(true);\n    return {\n      checked,\n    };\n  },\n};\n
\n

Disabled

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

Custom Shape

\n
<van-checkbox-group v-model="checked" shape="square">\n  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(['a', 'b']);\n    return { checked };\n  },\n};\n
\n

Custom Color

\n
<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>\n
\n

Custom Icon Size

\n
<van-checkbox v-model="checked" icon-size="24px">Checkbox</van-checkbox>\n
\n

Custom Icon

\n

Use icon slot to custom icon.

\n
<van-checkbox v-model="checked">\n  customize icon\n  <template #icon="props">\n    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n  </template>\n</van-checkbox>\n\n<style>\n  .img-icon {\n    height: 20px;\n  }\n</style>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(true);\n    return {\n      checked,\n      activeIcon:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n      inactiveIcon:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n    };\n  },\n};\n
\n

Left Label

\n

Set label-position prop to \'left\' to adjust the label position to the left of the Checkbox.

\n
<van-checkbox v-model="checked" label-position="left">Checkbox</van-checkbox>\n
\n

Disable Label Click

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

Checkbox Group

\n

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

\n
<van-checkbox-group v-model="checked">\n  <van-checkbox name="a">Checkbox a</van-checkbox>\n  <van-checkbox name="b">Checkbox b</van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(['a', 'b']);\n    return { checked };\n  },\n};\n
\n

Horizontal

\n
<van-checkbox-group v-model="checked" direction="horizontal">\n  <van-checkbox name="a">Checkbox a</van-checkbox>\n  <van-checkbox name="b">Checkbox b</van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref([]);\n    return { checked };\n  },\n};\n
\n

Maximum amount of checked options

\n
<van-checkbox-group v-model="checked" :max="2">\n  <van-checkbox name="a">Checkbox a</van-checkbox>\n  <van-checkbox name="b">Checkbox b</van-checkbox>\n  <van-checkbox name="c">Checkbox c</van-checkbox>\n</van-checkbox-group>\n
\n

Toggle All

\n
<van-checkbox-group v-model="checked" ref="checkboxGroup">\n  <van-checkbox name="a">Checkbox a</van-checkbox>\n  <van-checkbox name="b">Checkbox b</van-checkbox>\n  <van-checkbox name="c">Checkbox c</van-checkbox>\n</van-checkbox-group>\n\n<van-button type="primary" @click="checkAll">Check All</van-button>\n<van-button type="primary" @click="toggleAll">Toggle All</van-button>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref([]);\n    const checkboxGroup = ref(null);\n\n    const checkAll = () => {\n      checkboxGroup.value.toggleAll(true);\n    }\n    const toggleAll = () => {\n      checkboxGroup.value.toggleAll();\n    },\n\n    return {\n      checked,\n      checkAll,\n      toggleAll,\n      checkboxGroup,\n    };\n  },\n};\n
\n

Inside a Cell

\n
<van-checkbox-group v-model="checked">\n  <van-cell-group inset>\n    <van-cell\n      v-for="(item, index) in list"\n      clickable\n      :key="item"\n      :title="`Checkbox ${item}`"\n      @click="toggle(index)"\n    >\n      <template #right-icon>\n        <van-checkbox\n          :name="item"\n          :ref="el => checkboxRefs[index] = el"\n          @click.stop\n        />\n      </template>\n    </van-cell>\n  </van-cell-group>\n</van-checkbox-group>\n
\n
import { ref, onBeforeUpdate } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref([]);\n    const checkboxRefs = ref([]);\n    const toggle = (index) => {\n      checkboxRefs.value[index].toggle();\n    };\n\n    onBeforeUpdate(() => {\n      checkboxRefs.value = [];\n    });\n\n    return {\n      list: ['a', 'b'],\n      toggle,\n      checked,\n      checkboxRefs,\n    };\n  },\n};\n
\n

indeterminate

\n
<van-checkbox\n  v-model="isCheckAll"\n  :indeterminate="isIndeterminate"\n  @change="checkAllChange"\n>\n  Check All\n</van-checkbox>\n\n<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">\n  <van-checkbox v-for="item in list" :key="item" :name="item">\n    Checkbox {{ item }}\n  </van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const list = ['a', 'b', 'c', 'd']\n\n    const isCheckAll = ref(false);\n    const checkedResult = ref(['a', 'b', 'd']);\n    const isIndeterminate = ref(true);\n\n    const checkAllChange = (val: boolean) => {\n      checkedResult.value = val ? list : []\n      isIndeterminate.value = false\n    }\n\n    const checkedResultChange = (value: string[]) => {\n      const checkedCount = value.length\n      isCheckAll.value = checkedCount === list.length\n      isIndeterminate.value = checkedCount > 0 && checkedCount < list.length\n    }\n\n    return {\n      list,\n      isCheckAll,\n      checkedResult,\n      checkAllChange,\n      isIndeterminate,\n      checkedResultChange\n    };\n  },\n};\n
\n

API

\n

Checkbox Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelCheck statusbooleanfalse
nameCheckbox name, usually a unique string or numberany-
shapeCan be set to squarestringround
disabledDisable checkboxbooleanfalse
label-disabledWhether to disable label clickbooleanfalse
label-positionCan be set to leftstringright
icon-sizeIcon sizenumber | string20px
checked-colorChecked colorstring#1989fa
bind-groupWhether to bind with CheckboxGroupbooleantrue
indeterminateWhether indeterminate statusbooleanfalse
\n

CheckboxGroup Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelNames of all checked checkboxesany[]-
disabledWhether to disable all checkboxesbooleanfalse
maxMaximum amount of checked optionsnumber | string0(Unlimited)
directionDirection, can be set to horizontalstringvertical
icon-sizeIcon size of all checkboxesnumber | string20px
checked-colorChecked color of all checkboxesstring#1989fa
shape v4.6.3Can be set to squarestringround
\n

Checkbox Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionParameters
changeEmitted when value changedchecked: boolean
clickEmitted when the checkbox is clickedevent: MouseEvent
\n

CheckboxGroup Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionParameters
changeEmitted when value changednames: any[]
\n

Checkbox Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
defaultCustom label{ checked: boolean, disabled: boolean }
iconCustom icon{ checked: boolean, disabled: boolean }
\n

CheckboxGroup Methods

\n

Use ref to get CheckboxGroup instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
toggleAllToggle check status of all checkboxesoptions?: boolean | object-
\n

toggleAll Usage

\n
import { ref } from 'vue';\nimport type { CheckboxGroupInstance } from 'vant';\n\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\n// Toggle all\ncheckboxGroup.value?.toggleAll();\n// Select all\ncheckboxGroup.value?.toggleAll(true);\n// Unselect all\ncheckboxGroup.value?.toggleAll(false);\n\n// Toggle all, skip disabled\ncheckboxGroup.value?.toggleAll({\n  skipDisabled: true,\n});\n// Select all, skip disabled\ncheckboxGroup.value?.toggleAll({\n  checked: true,\n  skipDisabled: true,\n});\n
\n

Checkbox Methods

\n

Use ref to get Checkbox instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
toggleToggle check statuschecked?: boolean-
\n

Types

\n

The component exports the following type definitions:

\n
import type {\n  CheckboxProps,\n  CheckboxShape,\n  CheckboxInstance,\n  CheckboxLabelPosition,\n  CheckboxGroupProps,\n  CheckboxGroupInstance,\n  CheckboxGroupDirection,\n  CheckboxGroupToggleAllOptions,\n} from 'vant';\n
\n

CheckboxInstance and CheckboxGroupInstance is the type of component instance:

\n
import { ref } from 'vue';\nimport type { CheckboxInstance, CheckboxGroupInstance } from 'vant';\n\nconst checkboxRef = ref<CheckboxInstance>();\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\ncheckboxRef.value?.toggle();\ncheckboxGroupRef.value?.toggleAll();\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-checkbox-size20px-
--van-checkbox-border-colorvar(--van-gray-5)-
--van-checkbox-durationvar(--van-duration-fast)-
--van-checkbox-label-marginvar(--van-padding-xs)-
--van-checkbox-label-colorvar(--van-text-color)-
--van-checkbox-checked-icon-colorvar(--van-primary-color)-
--van-checkbox-disabled-icon-colorvar(--van-gray-5)-
--van-checkbox-disabled-label-colorvar(--van-text-color-3)-
--van-checkbox-disabled-backgroundvar(--van-border-color)-
\n
'},null,8,l))}}}]);