Version:

Install ​

shell
npm i @mate-vue/checkbox

Import ​

vue
<script setup>
import { MateCheckbox, MateCheckboxGroup } from '@mate-vue/checkbox';
</script>

Variants ​

Default ​

vue
<template>
  <MateCheckbox label="Default"></MateCheckbox>
</template>

Checked ​

vue
<template>
  <MateCheckbox label="Checked" checked></MateCheckbox>
</template>

Indeterminate ​

vue
<template>
  <MateCheckbox label="Indeterminate" indeterminate></MateCheckbox>
</template>

Disabled ​

vue
<template>
  <MateCheckbox label="Disabled" disabled></MateCheckbox>
</template>

Disabled Checked ​

vue
<template>
  <MateCheckbox label="Disabled checked" checked disabled></MateCheckbox>
</template>

Checkbox Group ​

vue
<template>
  <MateCheckboxGroup label="Group" :value="['0', '1']">
    <MateCheckbox label="Item 1" value="0" />
    <MateCheckbox label="Item 2" value="1" />
    <MateCheckbox label="Item 3" value="2" />
  </MateCheckboxGroup>
</template>

Vertical Group ​

vue
<template>
  <MateCheckboxGroup label="Vertical" :value="['0']" theme="vertical">
    <MateCheckbox label="Item 1" value="0" />
    <MateCheckbox label="Item 2" value="1" />
    <MateCheckbox label="Item 3" value="2" />
  </MateCheckboxGroup>
</template>