Checkbox checkbox

introduce

Make multiple selections from a set of alternatives.

Basic usage

Bind the checked state of the checkbox through v-model.

<z-checkbox v-model="checked">checkbox</z-checkbox>

import { ref } from 'vue'
const checked = ref(true)

Disabled state

Checkboxes can be disabled by setting the disabled attribute.

<z-checkbox v-model="checked" disabled>checkbox</z-checkbox>

Custom shapes

Set the shape property to square and the checkbox will become square.

<z-checkbox-group v-model="checked" shape="square">
   <z-checkbox name="a">checkbox a</z-checkbox>
   <z-checkbox name="b">checkbox b</z-checkbox>
</z-checkbox-group>

import { ref } from 'vue';
const checked = ref(['a', 'b']);

Custom color

Set the icon color of the checked state through the checked-color property.

<z-checkbox v-model="checked" checked-color="#ee0a24">checkbox</z-checkbox>

Custom size

The size of the icon can be customized through the icon-size attribute.

<z-checkbox v-model="checked" icon-size="48rpx">checkbox</z-checkbox>

Custom icon

Customize the icon through the icon slot, and you can use slotProps to determine whether it is selected.

<z-checkbox v-model="checked">
   Custom icon
   <template #icon>
     <image
       class="img-icon"
       :src="checked ? activeIcon : inactiveIcon"
     />
   </template>
</z-checkbox>

<style>
   .img-icon {
     width: 40rpx;
     height: 40rpx;
   }
</style>

import { ref } from 'vue';
const activeIcon =
   'https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png'
const inactiveIcon =
   'https://cdn.zebraui.com/zebra-ui/images/assets/demo-noselect.png'

Left text

Set the label-position property to 'left' to adjust the text position to the left side of the check box.

<z-checkbox v-model="checked" label-position="left">checkbox</z-checkbox>

Disable text click

After setting the label-disabled attribute, clicking on content other than the icon will not trigger the checkbox toggle.

<z-checkbox v-model="checked" label-disabled>checkbox</z-checkbox>

Checkbox group

Checkboxes can be used together with checkbox groups, which bind the checked state of the checkbox through the v-model array.

<z-checkbox-group v-model="checked">
   <z-checkbox name="a">checkbox a</z-checkbox>
   <z-checkbox name="b">checkbox b</z-checkbox>
</z-checkbox-group>

Horizontal arrangement

After setting the direction property to horizontal, the checkbox group becomes horizontal.

<z-checkbox-group v-model="checked" direction="horizontal">
   <z-checkbox name="a">checkbox a</z-checkbox>
   <z-checkbox name="b">checkbox b</z-checkbox>
</z-checkbox-group>

Limit the maximum number of options

The maximum number of options in a checkbox group can be limited through the max attribute.

<z-checkbox-group v-model="checked" :max="2">
   <z-checkbox name="a">checkbox a</z-checkbox>
   <z-checkbox name="b">checkbox b</z-checkbox>
   <z-checkbox name="c">checkbox c</z-checkbox>
</z-checkbox-group>

Select all and inverse selection

Selecting all and inverting selection can be achieved through the toggleAll method on the CheckboxGroup instance.

<z-checkbox-group v-model="checked" ref="checkboxGroup">
   <z-checkbox name="a">checkbox a</z-checkbox>
   <z-checkbox name="b">checkbox b</z-checkbox>
   <z-checkbox name="c">checkbox c</z-checkbox>
</z-checkbox-group>

<z-button type="primary" @click="checkAll">Select all</z-button>
<z-button type="primary" @click="toggleAll">Invert</z-button>

import { ref } from 'vue';

export default {
   setup() {
     const checked = ref([]);
     const checkboxGroup = ref(null);
     const checkAll = () => {
       checkboxGroup.value.toggleAll(true);
     }
     const toggleAll = () => {
       checkboxGroup.value.toggleAll();
     },

     return {
       checked,
       checkAll,
       toggleAll,
       checkboxGroup,
     };
   },
};

Used with cell component

When used with the cell component, you need to introduce the Cell and CellGroup components and trigger the switch through the toggle method on the Checkbox instance.

<z-checkbox-group v-model="checked">
   <z-cell-group inset>
     <z-cell
       v-for="(item, index) in list"
       clickable
       :key="item"
       :title="`Checkbox ${item}`"
       @click="toggle(index)"
     >
       <template #right-icon>
         <z-checkbox
           :name="item"
           :ref="el => checkboxRefs[index] = el"
           @click.stop
         />
       </template>
     </z-cell>
   </z-cell-group>
</z-checkbox-group>

import { ref } from 'vue';

export default {
   setup() {
     const checked = ref([]);
     const checkboxRefs = ref([]);
     const toggle = (index) => {
       checkboxRefs.value[index].toggle();
     };
     return {
       list: ['a', 'b'],
       toggle,
       checked,
       checkboxRefs,
     };
   },
};

Uncertain status

Use indeterminate to set whether the checkbox is in an indeterminate state.

<z-checkbox
   v-model="isCheckAll"
   :indeterminate="isIndeterminate"
   @change="checkAllChange"
>
   select all
</z-checkbox>

<z-checkbox-group v-model="checkedResult" @change="checkedResultChange">
   <z-checkbox v-for="item in list" :key="item" :name="item">
     Checkbox {{ item }}
   </z-checkbox>
</z-checkbox-group>

import { ref } from 'vue';

export default {
   setup() {
     const list = ['a', 'b', 'c', 'd']

     const isCheckAll = ref(false);
     const checkedResult = ref(['a', 'b', 'd']);
     const isIndeterminate = ref(true);

     const checkAllChange = (val: boolean) => {
       checkedResult.value = val ? list : []
       isIndeterminate.value = false
     }

     const checkedResultChange = (value: string[]) => {
       const checkedCount = value.length
       isCheckAll.value = checkedCount === list.length
       isIndeterminate.value = checkedCount > 0 && checkedCount < list.length
     }

     return {
       list,
       isCheckAll,
       checkedResult,
       checkAllChange,
       isIndeterminate,
       checkedResultChange
     };
   },
};

Checkbox Props

CheckboxGroup Props

Checkbox Events

CheckboxGroup Events

Checkbox Slots

CheckboxGroup method

Through ref, you can get the CheckboxGroup instance and call the instance method.

toggleAll method example

import { ref } from 'vue';

const checkboxGroupRef = ref();

// Invert all selections
checkboxGroupRef?.value.toggleAll();
//select all
checkboxGroupRef?.value.toggleAll(true);
// cancel all of them
checkboxGroupRef?.value.toggleAll(false);

// Invert all selections and skip disabled checkboxes
checkboxGroupRef?.value.toggleAll({
   skipDisabled: true,
});
// Select all and skip disabled checkboxes
checkboxGroupRef?.value.toggleAll({
   checked: true,
   skipDisabled: true,
});

Checkbox method

Through ref, you can get the Checkbox instance and call the instance method.

Style variables

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