Accordion

Accordion component for switching between vertically stacked panels. Supports single-expand (accordion) and multi-expand modes with multiple visual variants.

Basic Usage

Use accordion prop for mutually exclusive mode. v-model binds a string value.

<TAccordion v-model="activeName" accordion>
  <TAccordionItem name="item-1" title="Panel Title 1">
    Panel Content 1
  </TAccordionItem>
  <TAccordionItem name="item-2" title="Panel Title 2">
    Panel Content 2
  </TAccordionItem>
</TAccordion>

Multi-Expand Mode

Without the accordion prop, multiple panels can be expanded simultaneously. v-model binds an array.

<TAccordion v-model="activeNames">
  <TAccordionItem name="item-1" title="Panel Title 1">Content 1</TAccordionItem>
  <TAccordionItem name="item-2" title="Panel Title 2">Content 2</TAccordionItem>
</TAccordion>

Variants

Use variant prop: default (bordered), flush (borderless).

Icons

Add icons via icon prop on TAccordionItem.

---

API

TAccordion Props

Prop	Type	Default	Description
model-value	string | string[]	''	Expanded panel name(s)
accordion	boolean	false	Single-expand mode
variant	'default' | 'flush'	'default'	Visual variant

TAccordionItem Props

Prop	Type	Default	Description
name	string	—	Panel identifier (required)
title	string	''	Panel title
icon	Component	—	Title icon
disabled	boolean	false	Disable panel