Collapse

Accordion / multi-expand panels, aligned with the APG accordion pattern.

Basic usage

Basic

Content

Content

<script setup lang="ts">
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Consistency">Content</LhCollapseItem>
    <LhCollapseItem name="b" title="Feedback">Content</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Consistency">Content</LhCollapseItem>
    <LhCollapseItem name="b" title="Feedback">Content</LhCollapseItem>
  </LhCollapse>
</template>

Accordion

Accordion

Content

Content

<script setup lang="ts">
</script>

<template>
  <!-- Accordion -->
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Only one open">Content</LhCollapseItem>
    <LhCollapseItem name="b" title="Click again to collapse">Content</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <!-- Accordion -->
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Only one open">Content</LhCollapseItem>
    <LhCollapseItem name="b" title="Click again to collapse">Content</LhCollapseItem>
  </LhCollapse>
</template>

Controlled v-model and disabled items

v-model controls the open panel(s) (single value or array depending on accordion mode); disabled disables an individual panel.

Controlled

Controlled content A

Disabled content

Controlled content C

<script setup>
import { ref } from 'vue'

const activeNames = ref(['a'])
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Panel A">Controlled content A</LhCollapseItem>
    <LhCollapseItem name="b" title="Panel B (disabled)" disabled>Disabled content</LhCollapseItem>
    <LhCollapseItem name="c" title="Panel C">Controlled content C</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {
  data() {
    return { activeNames: ['a'] }
  },
}
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Panel A">Controlled content A</LhCollapseItem>
    <LhCollapseItem name="b" title="Panel B (disabled)" disabled>Disabled content</LhCollapseItem>
    <LhCollapseItem name="c" title="Panel C">Controlled content C</LhCollapseItem>
  </LhCollapse>
</template>

API

LhCollapse Props

Attribute	Description	Type	Default
modelValue	Active panel(s) (controlled v-model)	LhCollapseKey | LhCollapseKey[]	—
accordion	Only one panel open at a time	boolean	false
sx	Quick layout props	LhSxProps	—

LhCollapse Events

Event	Description	Callback
update:modelValue	Active panel(s) changed; emitted in controlled mode (when modelValue is passed, v-model)	(value: LhCollapseKey | LhCollapseKey[]) => void
change	Active panel(s) changed; emitted in uncontrolled mode (accordion yields a single key)	(value: LhCollapseKey | LhCollapseKey[]) => void

LhCollapseItem Props

Attribute	Description	Type	Default
name	Unique panel key	string | number	—
title	Title (or title slot)	string	—
disabled	Disabled	boolean	false
sx	Quick layout props	LhSxProps	—

Accessibility

• APG accordion: header is a real <button aria-expanded aria-controls>, content is role="region" + aria-labelledby
• Height transition uses CSS grid-template-rows: 0fr/1fr; respects prefers-reduced-motion

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/collapse/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhCollapseProps

export interface LhCollapseProps {
  modelValue?: LhCollapseKey | LhCollapseKey[]
  accordion?: boolean
  sx?: LhSxProps
}

LhCollapseItemProps

export interface LhCollapseItemProps {
  name: LhCollapseKey
  title?: string
  disabled?: boolean
  sx?: LhSxProps
}

LhCollapseKey _{(from @lh-ui/share/core/collapse)}

export type LhCollapseKey = string | number