PraxisAccordion

A collapsible accordion component. Renders one or more panels that expand/collapse on header click. Supports single or multiple active panels.

Usage

<script setup>
import { PraxisAccordion } from 'praxis-vue-ui'

const panels = [
  { id: 'info', header: 'Patient Information', content: 'Name, DOB, ID...' },
  { id: 'contact', header: 'Contact Details', content: 'Phone, Email...' },
  { id: 'medical', header: 'Medical History', content: 'Diagnoses...' },
]
</script>

<template>
  <PraxisAccordion :panels="panels" />
</template>

Or with slot-based content:

<PraxisAccordion>
  <template #header>Patient Information</template>
  <p>Name: Alice Johnson</p>
  <p>DOB: 1985-03-15</p>
</PraxisAccordion>

Props

Prop	Type	Default	Description
multiple	boolean	false	When true, multiple panels can be open simultaneously.
activeIndex	number | number[]	undefined	Index or array of indexes of initially expanded panels.

Emits

Event	Payload	Description
update:activeIndex	number | number[]	Emitted when the active panel changes.
tab-open	{ index: number }	Emitted when a panel opens.
tab-close	{ index: number }	Emitted when a panel closes.