Expansion panels

Composable accordion / disclosure UI: GkExpansionPanels owns v-model (open panel keys), GkExpansionPanel registers a value and provides context to GkExpansionPanelTitle (header button) and GkExpansionPanelText (collapsible body). GK_EXPANSION_PANELS and GK_EXPANSION_PANEL are exported from god-kit/vue for advanced composition.

This is intentionally smaller than Vuetify’s expansion stack: no VDefaultsProvider, elevation/rounded prop matrices, or group item registry beyond value matching.

When to use

Use for grouped content where users reveal one or more sections on demand, especially for dense settings or FAQ-style layouts.

Live Examples

Accordion

Default multiple=false: at most one panel is expanded at a time.

vue

<script setup lang="ts">
import { ref } from 'vue'
import {
  GkExpansionPanel,
  GkExpansionPanels,
  GkExpansionPanelText,
  GkExpansionPanelTitle,
} from 'god-kit/vue'

const accordionOpen = ref<(string | number)[]>([])
</script>

<template>
  <div class="gk-doc-expansion-sample">
    <GkExpansionPanels v-model="accordionOpen">
      <GkExpansionPanel value="a">
        <GkExpansionPanelTitle>Section one</GkExpansionPanelTitle>
        <GkExpansionPanelText>
          Content for the first section. Opening another section closes this one.
        </GkExpansionPanelText>
      </GkExpansionPanel>
      <GkExpansionPanel value="b">
        <GkExpansionPanelTitle>Section two</GkExpansionPanelTitle>
        <GkExpansionPanelText>Content for the second section.</GkExpansionPanelText>
      </GkExpansionPanel>
    </GkExpansionPanels>
  </div>
</template>

<style scoped>
.gk-doc-expansion-sample {
  max-width: 32rem;
}
</style>

Multiple open

Set multiple to allow several sections expanded together.

Beta body (open by default in this demo).

vue

<script setup lang="ts">
import { ref } from 'vue'
import {
  GkExpansionPanel,
  GkExpansionPanels,
  GkExpansionPanelText,
  GkExpansionPanelTitle,
} from 'god-kit/vue'

const multiOpen = ref<(string | number)[]>(['b'])
</script>

<template>
  <div class="gk-doc-expansion-sample">
    <GkExpansionPanels v-model="multiOpen" multiple>
      <GkExpansionPanel value="a">
        <GkExpansionPanelTitle>Alpha</GkExpansionPanelTitle>
        <GkExpansionPanelText>Alpha body.</GkExpansionPanelText>
      </GkExpansionPanel>
      <GkExpansionPanel value="b">
        <GkExpansionPanelTitle>Beta</GkExpansionPanelTitle>
        <GkExpansionPanelText>
          Beta body (open by default in this demo).
        </GkExpansionPanelText>
      </GkExpansionPanel>
    </GkExpansionPanels>
  </div>
</template>

<style scoped>
.gk-doc-expansion-sample {
  max-width: 32rem;
}
</style>

Disabled group

disabled prevents toggling; use for read-only review UIs.

Read-only review state — toggling is disabled on the group.

vue

<script setup lang="ts">
import {
  GkExpansionPanel,
  GkExpansionPanels,
  GkExpansionPanelText,
  GkExpansionPanelTitle,
} from 'god-kit/vue'
</script>

<template>
  <div class="gk-doc-expansion-sample">
    <GkExpansionPanels :model-value="['advanced']" disabled>
      <GkExpansionPanel value="advanced">
        <GkExpansionPanelTitle>Review</GkExpansionPanelTitle>
        <GkExpansionPanelText>
          Read-only review state — toggling is disabled on the group.
        </GkExpansionPanelText>
      </GkExpansionPanel>
    </GkExpansionPanels>
  </div>
</template>

<style scoped>
.gk-doc-expansion-sample {
  max-width: 32rem;
}
</style>

GkExpansionPanels

Props

Prop	Type	Default	Description
modelValue	(string | number)[]	[]	Keys of expanded panels; use v-model
multiple	boolean	false	When false, at most one panel is open (accordion)
disabled	boolean	false	Disables toggling for all panels

Slots

Slot	Description
default	GkExpansionPanel children

GkExpansionPanel

Props

Prop	Type	Default	Description
value	string | number	auto	Stable key for v-model; defaults to an internal id when omitted (standalone panel)
disabled	boolean	false	Disables this panel’s toggle

Slots

Slot	Description
default	Typically GkExpansionPanelTitle + GkExpansionPanelText and any custom nodes

GkExpansionPanelTitle

Header control: button, aria-expanded, aria-controls, focus ring. Must be a descendant of GkExpansionPanel.

Slots

Slot	Description
default	Visible title

GkExpansionPanelText

Collapsible region: role="region", aria-labelledby, hidden when collapsed. Must be a descendant of GkExpansionPanel.

Slots

Slot	Description
default	Panel body

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• GkExpansionPanelTitle renders button semantics; do not replace with non-focusable custom elements.
• Keep heading text concise so screen reader users can scan sections quickly.

Related components

• GkTabs
• GkMenu
• GkDivider

Out of scope (v1)

Nested expansion groups, lazy mount of body content, and parity with Vuetify’s before-active / after-active edge styling.