CheckboxGroup

Examples

Size variants

Available ui prop values: s / m.

<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-checkbox-group
      v-model="selected"
      :items="licenses"
    />
    <p>Checked: {{ readable }}</p>
  </section>
  <section>
    <h4>Small size</h4>
    <veui-checkbox-group
      v-model="selected"
      ui="s"
      :items="licenses"
    />
    <p>Checked: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { CheckboxGroup } from 'veui'

export default {
  components: {
    'veui-checkbox-group': CheckboxGroup
  },
  data () {
    return {
      selected: null,
      licenses: [
        {
          label: 'MIT License',
          value: 'mit'
        },
        {
          label: 'BSD License',
          value: 'bsd'
        },
        {
          label: 'Apache License 2.0',
          value: 'apache2'
        }
      ]
    }
  },
  computed: {
    readable () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Mixed selection

exclusive and empty-value can be used to enable coexistence of single and multiple selection scenarios.

Select size

Checked: any

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Select size</h4>
    <veui-checkbox-group
      v-model="selected"
      :items="licenses"
      empty-value="any"
    />
    <p>Checked: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { CheckboxGroup } from 'veui'

export default {
  components: {
    'veui-checkbox-group': CheckboxGroup
  },
  data () {
    return {
      selected: ['any'],
      licenses: [
        {
          label: 'Any',
          value: 'any',
          exclusive: true
        },
        {
          label: 'Small',
          value: 'sm'
        },
        {
          label: 'Medium',
          value: 'md'
        },
        {
          label: 'Large',
          value: 'lg'
        }
      ]
    }
  },
  computed: {
    readable () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Additional description

Set the desc field in the data source item or specify additional description through the desc slot. The additional description will be displayed when hovering over.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox-group
      v-model="flavor"
      :items="flavors"
    />
  </section>
  <section>
    <veui-checkbox-group
      v-model="flavor"
      :items="flavors"
    >
      <template #desc="{ desc, label }">
        {{ desc || `a description for ${label}` }}
      </template>
    </veui-checkbox-group>
  </section>
</article>
</template>

<script>
import { CheckboxGroup } from 'veui'

export default {
  components: {
    'veui-checkbox-group': CheckboxGroup
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
        { value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`s`	Small size style.
`m`	Medium size style.

items

Array<Object>

[]

Data source of the checkbox group. The item type is { label, value, disabled, exclusive, desc, ... }.

Name	Type	Description
`label`	`string`	Text description of the option.
`value`	`*`	The value corresponding to the option.
`disabled`	`boolean`	Whether the option is disabled.
`exclusive`	`boolean`	Whether the option is exclusive.
`desc`	`string`	Additional description information of the option.

value

Array

[]

v-model

The list of value of selected items in items.

disabled boolean false Whether the component is disabled.

readonly boolean false Whether the component is read-only.

empty-value * - The default value of the component when all selections are cancelled. Usually used in scenarios where exclusive option exists.

Slots

Name Description

item

Area for option description text.

Default content: label prop value.

Name	Type	Description
`label`	`string`	Option text.
`value`	`*`	Option value.
`index`	`number`	The index of the option in `items`.
`disabled`	`boolean`	Whether the option is disabled.

In addition, other properties in the items data item that are not described above will also be automatically bound to the slot props through v-bind.

desc Additional description information of the button, slot props are the same as the item slot.

Events

Name	Description
`change`	`v-model` Triggered after the selection state changes, with the callback parameter `(value: Array)`. `value` is an array composed of the `value` properties of the selected items in the current checkbox group.

Edit this page on GitHubEdit