BaseAccordion

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

Use it to stack collapsible sections: FAQs on a valuation page, property typologies grouped under "Residenziale / Commerciale", zones grouped by district. Fill it with BaseAccordionItems. Use the Accordion*Primitive parts only when an item needs a header layout BaseAccordionItem can't produce.

• type is required: "single" (one section open at a time; v-model is a string) or "multiple" (v-model is a string array).
• collapsible lets the user close the open section in "single" mode. Without it, one section always stays open once opened.
• v-model is optional; use it to open sections initially or to read which are open. Values are the items' values.

Keyboard support (arrow keys between headers, Enter/Space to toggle) and ARIA wiring come built in.

#Usage

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

const faqs = [
  { id: "faq-1", question: "Come viene calcolata la valutazione?", answer: "Confrontiamo annunci simili in zona con i dati OMI." },
  { id: "faq-2", question: "La valutazione online è gratuita?", answer: "Sì, ed è disponibile anche dall'app Wikicasa." },
];
const open = ref("faq-1");
</script>

<template>
  <BaseAccordion v-model="open" type="single" collapsible class="faq-list">
    <BaseAccordionItem v-for="faq in faqs" :key="faq.id" :value="faq.id" :title="faq.question" :arrow-width="18">
      <p style="margin-top: 0">{{ faq.answer }}</p>
    </BaseAccordionItem>
  </BaseAccordion>
</template>

<style>
.faq-list > * + * { border-top: 1px solid #dee2e6; }
</style>

#Do / Don't

• Give every item a unique value; it is what v-model holds.
• Closed sections stay in the DOM (hidden), which keeps FAQ text indexable. Pass unmount-on-hide to drop it instead.
• disabled on the root disables every section.
• Separators/borders between items go in class on the root or items; the accordion draws none.
• Its default slot exposes modelValue if a header needs to know what is open.

#API

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

Props

Name	Type	Default	Required	Description
collapsible	boolean			When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect.
type	T		yes	Determines whether a "single" or "multiple" items can be selected at a time.
disabled	boolean			When true, prevents the user from interacting with the accordion and all its items
dir	Direction			The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.
orientation	DataOrientation			The orientation of the accordion.
unmountOnHide	boolean			When true, the element will be unmounted on closed state.
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.
modelValue	Optional<ModelType>

Events

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

v-model

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

Slots

Name	Slot props
default	{ modelValue: AcceptableValue | AcceptableValue[] | undefined; }

Exposed (template ref)

None.