BaseToggle

import BaseToggle from "@wikicasa-dev/components/UIKit/BaseToggle";

Use for a yes/no setting that applies immediately or a boolean property feature: "Balcone", "Cantina", "Giardino privato", "Ricevi avvisi via email". For choosing between two named options (e.g. "Privato" / "Agenzia") use BaseComplexToggle; for a consent or a choice that's submitted with a form use CheckboxBtn.

v-model is a boolean. The text comes from the label prop (rendered on the right, HTML allowed), or from the leftLabel / rightLabel slots. With leftLabel the right label is not rendered.

#Usage

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

const hasBalcony = ref(false);
const hasCellar = ref(true);
</script>

<template>
  <BaseToggle v-model="hasBalcony" data-cy="toggle-balcony" label="Balcone" />

  <!-- Label on the left, switch pushed to the right edge of the row -->
  <BaseToggle v-model="hasCellar" data-cy="toggle-cellar" style="justify-content: space-between">
    <template #leftLabel>
      <span>Cantina</span>
    </template>
  </BaseToggle>
</template>

#Do / Don't

• Do always show visible text next to the switch (via label or a slot): the switch itself carries no accessible name, so the adjacent text is all users get.
• Do use it for settings that take effect right away; use a checkbox when the value is only applied on submit.
• Don't put the label in both slots; only one side is rendered.
• Don't pass aria-label expecting it on the switch: attributes land on the wrapper <div>.

#Styling hooks

• class / style go on the flex row wrapping label and switch (gap 8px); use them for layout such as justify-content: space-between.
• The switch is a button with data-state="checked|unchecked"; the checked track uses the primary color, unchecked the light (w-cultured) one.

#API

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

Props

Name	Type	Default	Required	Description
label	string
dataCy	string
modelValue	Optional<boolean>	false

Events

Name	Payload
update:modelValue	[value: Optional<boolean>]

v-model

• v-model binds modelValue (Optional<boolean>)

Slots

Name	Slot props
leftLabel
rightLabel

Exposed (template ref)

None.