BaseAccordionItem

import BaseAccordionItem from "@wikicasa-dev/components/UIKit/Accordion/BaseAccordionItem";

Use it inside BaseAccordion (see that doc for single/multiple mode and v-model). It renders a heading (h3 by default, change with headerTag) containing a full-width trigger button with title and a chevron that rotates when open, then the content, which animates its height.

#Usage

<script setup lang="ts">
import BaseAccordion from "@wikicasa-dev/components/UIKit/Accordion/BaseAccordion";
import BaseAccordionItem from "@wikicasa-dev/components/UIKit/Accordion/BaseAccordionItem";
</script>

<template>
  <BaseAccordion type="multiple">
    <BaseAccordionItem value="residenziale" title="Residenziale" header-tag="h4" content-classes="typology-options">
      <label><input type="checkbox" /> Appartamento</label>
      <label><input type="checkbox" /> Villa</label>
    </BaseAccordionItem>

    <BaseAccordionItem value="centro" trigger-classes="zone-trigger">
      <template #header-content>
        <label style="flex-grow: 1"><input type="checkbox" /> Centro storico</label>
      </template>
      <label><input type="checkbox" /> Duomo</label>
      <label><input type="checkbox" /> Brera</label>
    </BaseAccordionItem>
  </BaseAccordion>
</template>

<style>
.typology-options { display: flex; flex-direction: column; }
.zone-trigger { padding-inline: 20px !important; }
</style>

#Do / Don't

• value is required and must be unique within the accordion.
• header-content slot: content placed in the header before the trigger (e.g. a checkbox that selects the whole group). With it, the trigger shrinks to the arrow, so pass a title only if you want text next to the arrow.
• trigger slot replaces the title and arrow inside the trigger button and removes its default padding/styling. Don't put buttons or links in it (it is already a button).
• arrowColor currently has no effect (the arrow stays #222). To recolor it, pass arrowClasses with a class that sets the stroke of its path (e.g. .my-arrow path { stroke: #2b5dff; }).
• Default spacing is 16px around the title and 16px horizontal padding in the content; override with triggerClasses / contentClasses.

#Styling hooks

Class props: headerClasses (the heading, a flex row), triggerClasses (the button), arrowClasses (the chevron), contentClasses (the panel). class goes on the item wrapper. The open trigger and content carry data-state="open" for data-[state=open]: utilities.

#API

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

Props

Name	Type	Default	Required	Description
title	string
arrowColor	#${string}
arrowWidth	number	12
dataCy	string
value	string		yes
triggerClasses	ClassTypeProp
headerClasses	ClassTypeProp
contentClasses	ClassTypeProp
arrowClasses	ClassTypeProp
headerTag	AsTag | Component	"h3"		The element or component this component should render as. Can be overwritten by asChild.

Events

None.

v-model

None.

Slots

Name	Slot props
header-content
trigger
default

Exposed (template ref)

None.