CheckboxGroupPrimitive

Unstyled multi-select group root (reka-ui CheckboxGroupRoot) holding an array of checked values.

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

The root of a custom-looking multi-select, such as chip/pill toggles ("Vicino a: Scuole, Metro, Supermercati") or icon tiles. It renders no visuals; its children are CheckboxGroupItemPrimitives, each contributing its value to the v-model array. For a standard list of checkboxes use CheckboxButtonGroup.

Each item is a focusable button reached with Tab. Add roving-focus to move between items with the arrow keys instead (tuned by loop, orientation, dir); it is off unless you set it. Group-level disabled, required and name are also available.

#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 nearTo = ref<string[]>([]);
const services = [
  { value: "schools", label: "Scuole" },
  { value: "metro", label: "Metropolitana" },
  { value: "shops", label: "Supermercati" },
];
</script>

<template>
  <CheckboxGroupPrimitive v-model="nearTo" class="chips" data-cy="near-to">
    <CheckboxGroupItemPrimitive v-for="s in services" :key="s.value" :value="s.value" class="chip">
      {{ s.label }}
    </CheckboxGroupItemPrimitive>
  </CheckboxGroupPrimitive>
</template>

<style scoped>
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 8px 16px; border: 1px solid rgb(var(--uikit-color-w-secondary)); border-radius: var(--uikit-radius-xs); background: #fff; }
.chip[data-state="checked"] { border-color: rgb(var(--uikit-color-w-primary)); background: rgb(var(--uikit-color-w-lavender)); }
</style>

#Do / Don't

• Do put CheckboxGroupItemPrimitives with unique values inside it (wrapping layout elements are fine).
• Do provide a visible group heading next to it ("Vicino a"); the root has no label of its own.
• Do style checked items with [data-state="checked"].
• Don't use it when the standard checkbox look is fine; use CheckboxButtonGroup.

#Styling hooks

None: it renders a plain <div> you style with class. Use the design tokens (--uikit-color-*, --uikit-radius-*) for colors and radii.

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string
defaultValue	T[]			The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
modelValue	T[]			The controlled value of the checkbox. Can be binded with v-model.
rovingFocus	boolean			When false, navigating through the items using arrow keys will be disabled.
disabled	boolean			When true, prevents the user from interacting with the checkboxes
dir	Direction$5			The direction of navigation between items.
orientation	Orientation$1			The orientation of the group. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
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.
loop	boolean			Whether keyboard navigation should loop around
name	string			The name of the field. Submitted with its owning form as part of a name/value pair.
required	boolean			When true, indicates that the user must set the value before the owning form can be submitted.

Events

Name	Payload
update:modelValue	[value: T[]]

v-model

• v-model binds modelValue (T[])

Slots

Name	Slot props
default

Exposed (template ref)

None.