CheckboxBtn

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

Use for one on/off choice submitted with a form, such as accepting the privacy policy or "Solo annunci con foto", and as the item inside a CheckboxButtonGroup when you render the group's items yourself. For a list of options bound to one array use CheckboxButtonGroup; for chip-style toggle buttons compose CheckboxGroupPrimitive + CheckboxGroupItemPrimitive; for a setting that applies immediately use BaseToggle.

The whole row is a <label>, so clicking the text toggles the box. The text comes from the label prop or the label slot (for links or truncation).

#Usage

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

const onlyWithPhotos = ref(false);
const privacyAccepted = ref(false);
</script>

<template>
  <CheckboxBtn v-model="onlyWithPhotos" data-cy="filter-photos" label="Solo annunci con foto" />

  <CheckboxBtn v-model="privacyAccepted" data-cy="privacy-checkbox">
    <template #label>
      <span>Ho letto e accetto l'<a href="/privacy" target="_blank">informativa privacy</a></span>
    </template>
  </CheckboxBtn>
</template>

#Do / Don't

• Do use v-model; the checked prop is deprecated.
• Do always provide label text (prop or slot); it is the checkbox's accessible name.
• Do use disabled to lock it; inputClass styles the 20px box.
• Do listen to change if you need { id, label, checked } in one payload (id is the id prop, or a generated one).
• Don't rely on required for validation: it is not applied to the control. Validate yourself.
• Don't use it for mutually exclusive options; use RadioButtonGroup.

#Styling hooks

• .uikit-checkbox-btn { --font-size } (default 16px): label text size.
• class goes on the <label> row (flex, 12px gap); the box exposes data-state="checked|unchecked".

#API

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

Props

Name	Type	Default	Required	Description
id	TID
dataCy	string
disabled	boolean
checked	boolean	undefined
required	boolean
inputClass	ClassTypeProp
label	TLabel	""
value	AcceptableValue
modelValue	boolean	false

Events

Name	Payload
click	[MouseEvent]
change	[EventPayload]
update:modelValue	[value: boolean]

v-model

• v-model binds modelValue (boolean)

Slots

Name	Slot props
label

Exposed (template ref)

None.