Checkbox Group

It's used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.

Basic Usage

Bind v-model to a Boolean typed variable.

<template>
  <HcCheckboxGroup
    v-model="checkedValues"
    label="Label"
    :items="options"
  />
</template>

<script lang="ts" setup>
import { CheckboxItemType, HcCheckboxGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const checkedValues = ref<string[]>();

const options = ref<CheckboxItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    disabled: true,
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
  {
    value: 'option_6',
    label: 'Option 6',
  },
]);
</script>

Column direction

Change prop direction to determinate checkbox group align

<template>
  <HcCheckboxGroup
    v-model="checkedValues"
    label="Label"
    :items="options"
    direction="col"
  />
</template>

<script lang="ts" setup>
import { CheckboxItemType, HcCheckboxGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const checkedValues = ref<string[]>();

const options = ref<CheckboxItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
  {
    value: 'option_6',
    label: 'Option 6',
  },
]);
</script>

Max checked count

Use prop max to determinate max count of selected checkboxes

<template>
  <HcCheckboxGroup
    v-model="checkedValues"
    label="Label"
    :items="options"
    :max="3"
  />
</template>

<script lang="ts" setup>
import { CheckboxItemType, HcCheckboxGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const checkedValues = ref<string[]>();

const options = ref<CheckboxItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
  {
    value: 'option_6',
    label: 'Option 6',
  },
]);
</script>

Indeterminate

Indeterminate usage

<template>
  <div>
    <HcCheckbox
      v-model="isIndeterminate"
      label="Select all"
      :indeterminate="Boolean(checkedValues?.length && !isCheckAll)"
      @change="checkAllChange"
    />
    <HcCheckboxGroup
      v-model="checkedValues"
      :items="options"
      class="flex flex-col !items-start mt-5"
      custom-class="mb-5"
      @change="onChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { CheckboxItemType, HcCheckboxGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const isIndeterminate = ref(false);
const isCheckAll = ref(false);

const onChange = (value: string[]) => {
  const checkedCount = value.length;
  isIndeterminate.value = checkedCount > 0;
  isCheckAll.value = Boolean(options.value?.filter((o) => !o.disabled)?.length === checkedValues.value?.length);
};

const checkAllChange = () => {
  checkedValues.value = !isCheckAll.value ? options.value?.filter((o) => !o.disabled).map((o) => o.value) : [];
  isCheckAll.value = Boolean(options.value?.filter((o) => !o.disabled)?.length === checkedValues.value?.length);
  isIndeterminate.value = isCheckAll.value;
};

const checkedValues = ref<string[]>();

const options = ref<CheckboxItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
  {
    value: 'option_6',
    label: 'Option 6',
  },
]);
</script>

Disabled & Readonly

Use prop disabled or readonly to change state

<template>
  <div>
    <HcCheckboxGroup
      v-model="checkedValues"
      label="Label"
      :items="options"
      disabled
    />

    <HcCheckboxGroup
      v-model="checkedValues"
      label="Label"
      :items="options"
      class="mt-10"
      readonly
    />
  </div>
</template>

<script lang="ts" setup>
import { CheckboxItemType, HcCheckboxGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const checkedValues = ref<string[]>();

const options = ref<CheckboxItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
]);
</script>

Error message

Add prop errorMsg for show error

<template>
  <HcCheckboxGroup
    v-model="checkedValues"
    label="Label"
    :items="options"
    error-msg="This field is required"
  />
</template>

<script lang="ts" setup>
import { CheckboxItemType, HcCheckboxGroup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const checkedValues = ref<string[]>();

const options = ref<CheckboxItemType[]>([
  {
    value: 'option_1',
    label: 'Option 1',
  },
  {
    value: 'option_2',
    label: 'Option 2',
  },
  {
    value: 'option_3',
    label: 'Option 3',
  },
  {
    value: 'option_4',
    label: 'Option 4',
  },
  {
    value: 'option_5',
    label: 'Option 5',
  },
  {
    value: 'option_6',
    label: 'Option 6',
  },
]);

</script>

Props

Property	Type	Values	Description	Default
modelValue	String[]	String[]	binding value	[]
label	String	String	label text
items	CheckboxItemType[]	CheckboxItemType[]	items of checkbox group	[]
max	Number	Number	max count of the selected items	undefined
customClass	String	String	custom class for each of Checkbox
errorMsg	String	String	error message
direction	string	rowcol	direction of the checkboxes	row
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is read only	false

Slots

Property	Type	Values	Description	Default
label-suffix		-	customize label suffix content
default		-	customize default content

Events

Property	Type	Values	Description	Default
update:model-value	Function	value - string[]	triggers when the binding value changes
change	Function	value - string[]	triggers when the binding value changes

Checkbox Group #

Basic Usage #

Column direction #

Max checked count #

Indeterminate #

Disabled & Readonly #

Error message #

Props #

Slots #

Events #