PxAccordion

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

Usage

Demo

Name, Email, Role...

Phone, Address...

Past transactions...

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

const panels = [
  { value: 'info', header: 'User Information', content: 'Name, Email, Role...' },
  { value: 'contact', header: 'Contact Details', content: 'Phone, Address...' },
  { value: 'history', header: 'Account History', content: 'Past transactions...' },
]
</script>

<template>
  <PxAccordion :items="panels" />
</template>

Without items, PxAccordion renders a single default scoped slot instead — build your own panel markup and call toggle/isOpen yourself:

Slot-based

Name: Alice Johnson

Role: Administrator

<PxAccordion v-slot="{ isOpen, toggle }">
  <div class="px-accordion-panel">
    <button type="button" class="px-accordion-header" @click="toggle('info')">
      User Information
    </button>
    <div v-show="isOpen('info')" class="px-accordion-content-inner">
      <p>Name: Alice Johnson</p>
      <p>Role: Administrator</p>
    </div>
  </div>
</PxAccordion>

Props

Prop	Type	Default	Description
items	AccordionItem[]	undefined	Renders panels programmatically (header/content pairs). Omit to use the default scoped slot instead.
multiple	boolean	false	When true, multiple panels can be open simultaneously.
value	string | string[]	undefined	Value (or array of values, if multiple) of initially expanded panel(s).

Slots

Slot	Props	Description
default	{ isOpen, toggle }	Rendered instead of items — isOpen(value) checks a panel's state, toggle(value) opens/closes it.

This component has no emits — it's fully uncontrolled; use the value prop only to set the initial state.