BaseComplexToggle

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

Use to switch between exactly two named modes: "Privato" / "Agenzia", "Tasso variabile" / "Tasso fisso", "Avviso immediato" / "Avviso giornaliero". For an on/off boolean use BaseToggle; for three or more options use RadioButtonGroup.

labels holds leftToggle and rightToggle, each { id?, label, icon?, checked?, payload? }. v-model holds the whole active toggle object. On mount it selects the side marked checked, otherwise the left one, and emits it right away.

#Usage

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

const rateType = ref<ToggleType | null>(null);
</script>

<template>
  <BaseComplexToggle
    v-model="rateType"
    data-cy="mortgage-rate-toggle"
    type="padded"
    :labels="{
      leftToggle: { id: 'variabile', label: 'Tasso variabile' },
      rightToggle: { id: 'fisso', label: 'Tasso fisso', checked: true },
    }"
  />
  <p>Hai scelto: {{ rateType?.label }}</p>
</template>

#Do / Don't

• Do give the two options different labels: the active side is matched by label.
• Do use type="padded" for the inset pill highlight (most common), "full" (default) for a highlight that fills the half.
• Do use size="lg" (342×56px) for prominent page-level choices; default is 230×42px. mode="mobile" widens it to 342px below the sm breakpoint.
• Do pick the highlight color with btnBgColor (uikit-bg-w-primary, uikit-bg-w-dark-primary, uikit-bg-w-lavender default, …); text turns white on dark colors automatically.
• Do set the initial side with checked: true in labels, not by pre-filling v-model.
• Don't rely on it for keyboard-only users: the halves are clickable divs, not buttons. Offer another control if keyboard access matters.
• Don't use more than two options.

#Styling hooks

• .base-complex-toggle: --base-complex-toggle-width, --base-complex-toggle-height, --base-complex-toggle-radius, --base-complex-toggle-border-width, --base-complex-toggle-border-color, --padding-x-bg / --padding-y-bg (inset of the padded highlight).
• .base-complex-toggle-active { --base-complex-toggle-active-color }: text color of the active side.
• btnClasses styles the sliding highlight (e.g. a custom background); left_icon / right_icon slots replace the optional icon images.

#API

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

Props

Name	Type	Default	Required	Description
labels	ComplexToggleType<TID, TPayload>		yes
type	"full" | "padded"	"full"
mode	"" | "mobile"	""
btnBgColor	BtnBgColorType	"uikit-bg-w-lavender"
btnClasses	ClassTypeProp
borderContainerColor	"uikit-border-w-black" | "uikit-border-w-primary" | "uikit-border-w-secondary" | "uikit-border-w-dark-primary" | "uikit-border-w-carbon" | "uikit-border-w-gray" | "uikit-border-w-warning" | "uikit-border-w-danger" | "uikit-border-w-lavender"	"uikit-border-w-secondary"
size	"" | "lg"	""
modelValue	Nullable<ToggleType<TID, TPayload>>	null

Events

Name	Payload
update:modelValue	[value: Nullable<ToggleType<TID, TPayload>> | undefined]

v-model

• v-model binds modelValue (Nullable<ToggleType<TID, TPayload>>)

Slots

Name	Slot props
left_icon
right_icon

Exposed (template ref)

None.