CheckboxButtonGroup

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

Use for multi-select lists of options: property features, zones of a city, typologies. v-model is the array of checked values. For chip/button-style options compose CheckboxGroupPrimitive + CheckboxGroupItemPrimitive; for a single checkbox use CheckboxBtn.

Two ways to render:

• Simple: pass items ({ value, label, dataCy?, required? }[]) and it renders a CheckboxBtn per item.
• Custom: use the default slot, which receives isChecked(value), handleCheck(value, checked) and handleResetCheck(checked), and render CheckboxBtns yourself (needed for the reset option below).

#Usage

<script setup lang="ts">
import { ref } from "vue";
import CheckboxButtonGroup from "@wikicasa-dev/components/UIKit/Checkbox/v2/CheckboxButtonGroup";
import CheckboxBtn from "@wikicasa-dev/components/UIKit/Checkbox/CheckboxBtn";

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

// "Tutta Milano" is the reset option: it is checked when nothing or everything else is
const zones = [
  { value: "centro", label: "Centro" },
  { value: "navigli", label: "Navigli" },
  { value: "citta-studi", label: "Città Studi" },
];
const selectedZones = ref<string[]>(["milano"]);
</script>

<template>
  <CheckboxButtonGroup
    v-model="features"
    :items="[
      { value: 'balcone', label: 'Balcone' },
      { value: 'box', label: 'Box auto' },
      { value: 'ascensore', label: 'Ascensore' },
    ]"
  />

  <CheckboxButtonGroup v-model="selectedZones" reset-value="milano">
    <template #default="{ isChecked, handleCheck, handleResetCheck }">
      <CheckboxBtn value="milano" label="Tutta Milano" :model-value="isChecked('milano')" @update:model-value="handleResetCheck" />
      <CheckboxBtn
        v-for="zone in zones"
        :key="zone.value"
        :value="zone.value"
        :label="zone.label"
        :model-value="isChecked(zone.value)"
        @update:model-value="(checked) => handleCheck(zone.value, checked)"
      />
    </template>
  </CheckboxButtonGroup>
</template>

#Do / Don't

• Do use truthy values (non-empty strings, non-zero numbers): 0, "" and false are ignored.
• Do use resetValue only with the custom slot, passing :value to every CheckboxBtn (the reset one included) and wiring the reset one to handleResetCheck. With items, resetValue doesn't work correctly.
• Do clear the selection by setting v-model:reset to true (it switches itself back to false), or by setting v-model to [].
• Don't use it for mutually exclusive options; use RadioButtonGroup.

#Styling hooks

None of its own: the root is a plain <div> (style it with class). Item styling is CheckboxBtn's (--font-size, class, inputClass).

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string
items	CheckboxButtonItem<T>[]	[]
resetValue	T			Value of the reset button
modelValue	NonNullable<T>[]	[]
reset	boolean	false

Events

Name	Payload
update:modelValue	[value: NonNullable<T>[]]
update:reset	[value: boolean]

v-model

• v-model binds modelValue (NonNullable<T>[])
• v-model:reset (boolean)

Slots

Name	Slot props
default	{ isChecked: (value: T) => boolean; handleCheck: (value: T, checked: boolean) => void; handleResetCheck: (checked: boolean) => void; }

Exposed (template ref)

None.