CheckboxGroup

Older checkbox list driven by checkboxData objects, emitting the checked objects, with optional reset checkbox.

import CheckboxGroup from "@wikicasa-dev/components/UIKit/Checkbox/CheckboxGroup";

Kept for existing screens. In new work use CheckboxButtonGroup, which binds a plain array of values with v-model and covers the same "list with a select-all/reset option" case through resetValue.

How it differs, if you have to maintain one:

• It has no modelValue input: initial checks come from checkboxData[].checked, and it only emits update:modelValue with the checked objects (also once on mount).
• To re-read checkboxData after changing it, set v-model:refresh to true. To clear, switch reset to true.
• One item may have reset: true; autoCheckResetAll, autoCheckResetEmpty and manualToggleResetButton control when it checks itself.

#Usage

<script setup lang="ts">
import CheckboxGroup from "@wikicasa-dev/components/UIKit/Checkbox/CheckboxGroup";
import type { CheckboxButtonType } from "@wikicasa-dev/components";

const typologies: CheckboxButtonType<number, string>[] = [
  { id: 0, label: "Tutte le residenziali", reset: true, checked: true },
  { id: 1, label: "Appartamento" },
  { id: 2, label: "Villa" },
  { id: 3, label: "Attico" },
];
const onChange = (checked: CheckboxButtonType[]) => console.log(checked.map((c) => c.id));
</script>

<template>
  <CheckboxGroup :checkbox-data="typologies" auto-check-reset-all auto-check-reset-empty @update:model-value="onChange" />
</template>

#Do / Don't

• Don't use it in new designs; use CheckboxButtonGroup.
• Do keep item ids unique; they are the keys of the checked state.
• Do use the checkbox_elements slot (isActive, handleChange, reset) only to restyle items in an existing screen.

#Styling hooks

• class goes on the .checkbox-group-container wrapper; checkboxContainerClasses on each CheckboxBtn.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
checkboxData	CheckboxButtonType<TID, TLabel, TPayload>[]
formCheckInline	boolean	false
reset	boolean	false
checkboxContainerClasses	ClassTypeProp	""
autoCheckResetAll	boolean	false		[ResetCheckbox required] If true, when you check all the checkboxes, the reset one will be checked
autoCheckResetEmpty	boolean	false		[ResetCheckbox required] If true, when you uncheck all the checkboxes, the reset one will be checked
manualToggleResetButton	boolean	false		[ResetCheckbox required] If true, you can manually toggle the reset button. Otherwise, if autoCheckResetEmpty is false, the reset button would never be unchecked when the user clicks on it
getKey	GetterIdType<string | number | CheckboxButtonType<TID, TLabel, TPayload>>	(checkBtn: CheckboxType | string | number): string => { if (typeof checkBtn === "string" || typeof checkBtn === "number") return ${checkBtn}; return ${checkBtn.id}; }
groupId	string	""
dataCy	string	""
refresh	boolean	false		If true, we will reinitialized the inner data of the component

Events

Name	Payload
update:modelValue	[CheckboxButtonType<TID, TLabel, TPayload>[]]
resetted
checkedGroup	[string]
update:refresh	[value: boolean]

v-model

• v-model:refresh (boolean)

Slots

Name	Slot props
default	{ isActive: (elem: string | number | CheckboxButtonType<TID, TLabel, TPayload>) => boolean; handleChange: (checkboxValue: CheckboxButtonType<TID, TLabel, TPayload>) => void; checkboxesData: CheckboxButtonType<TID, TLabel, TPayload>[]; }
checkbox_elements	{ isActive: (elem: string | number | CheckboxButtonType<TID, TLabel, TPayload>) => boolean; handleChange: (checkboxValue: CheckboxButtonType<TID, TLabel, TPayload>) => void; checkboxesData: CheckboxButtonType<TID, TLabel, TPayload>[]; reset: () => void; }

Exposed (template ref)

None.