CheckboxGroupItemPrimitive

Unstyled checkbox item (reka-ui CheckboxRoot) for building custom chips or tiles inside CheckboxGroupPrimitive.

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

One option of a CheckboxGroupPrimitive. It renders an unstyled <button role="checkbox"> whose content is your default slot, so it can look like a chip, a tile with an icon, or anything else. Checking it adds its value to the group's v-model array. For a classic checkbox with a box and label use CheckboxBtn.

The default slot receives { modelValue, state } (state is true, false or "indeterminate"), handy for swapping an icon when checked.

#Usage

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

const heating = ref<string[]>(["autonomo"]);
</script>

<template>
  <CheckboxGroupPrimitive v-model="heating" class="tiles">
    <CheckboxGroupItemPrimitive value="autonomo" data-cy="heating-autonomo" class="tile" v-slot="{ state }">
      <span aria-hidden="true">{{ state === true ? "✓" : "+" }}</span> Riscaldamento autonomo
    </CheckboxGroupItemPrimitive>
    <CheckboxGroupItemPrimitive value="centralizzato" data-cy="heating-centralizzato" class="tile">
      Riscaldamento centralizzato
    </CheckboxGroupItemPrimitive>
  </CheckboxGroupPrimitive>
</template>

<style scoped>
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { padding: 12px; border: 1px solid rgb(var(--uikit-color-w-secondary)); border-radius: var(--uikit-radius-xs); background: #fff; }
.tile[data-state="checked"] { border-color: rgb(var(--uikit-color-w-primary)); background: rgb(var(--uikit-color-w-lavender)); }
.tile:focus-visible { outline: 2px solid rgb(var(--uikit-color-w-primary)); }
</style>

#Do / Don't

• Do always place it inside CheckboxGroupPrimitive and give it a value unique within the group.
• Do put readable text in the slot: it is the button's accessible name. Icon-only items need an aria-label.
• Do style the checked and disabled looks with [data-state="checked"] and [data-disabled], and add a visible :focus-visible style.
• Don't add a click handler to toggle it; the group manages the state.

#Styling hooks

None: it is an unstyled <button>; class goes on it. Use data-state / data-disabled selectors and the design tokens.

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string
value	TValue		yes
modelValue	T | "indeterminate" | null			The controlled value of the checkbox. Can be binded with v-model.
defaultValue	T | "indeterminate"			The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
disabled	boolean			When true, prevents the user from interacting with the checkbox
asChild	boolean			Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as	AsTag | Component			The element or component this component should render as. Can be overwritten by asChild.
required	boolean			When true, indicates that the user must set the value before the owning form can be submitted.
id	string			Id of the element
name	string			The name of the field. Submitted with its owning form as part of a name/value pair.
trueValue	T			The value used when the checkbox is checked. Defaults to true.
falseValue	T			The value used when the checkbox is unchecked. Defaults to false.

Events

Name	Payload
update:modelValue	[value: T | "indeterminate"]

v-model

• v-model binds modelValue (T \| "indeterminate" \| null)

Slots

Name	Slot props
default	{ modelValue: T | "indeterminate"; state: CheckedState; }

Exposed (template ref)

None.