ExpandablePanel

Progressively disclose details with a native, keyboard-operable summary and a themed content surface.

ExpandablePanel

View source ยท API reference

Release details

Open the summary to reveal supporting information. Native details preserves a useful interface before any app mounts.

What ships with a component? 3 parts Source, theme styles and composition
Open for details
  • A typed component contract.
  • Theme-aware presentation.
  • Composable slots and native HTML.
<ExpandablePanel
  title="What ships with a component?"
  description="Source, theme styles and composition"
  badge="3 parts"
  icon="lucide:check"
  meta="Open for details"
  tone="accent"
>
  <ul>
    <li>A typed component contract.</li>
    <li>Theme-aware presentation.</li>
    <li>Composable slots and native HTML.</li>
  </ul>
</ExpandablePanel>

Independent disclosure sections

An initially open panel can sit beside a closed one. These disclosures are independent, not a single-selection accordion.

Content authoring

Write content in MDX and use registered components directly.

Browser state

Mount a RegorApp when a sample needs reactive state.

<Flex direction="column">
  <ExpandablePanel
    title="Content authoring"
    :open="true"
    variant="outline"
    summaryVariant="surface"
  >
    <p>Write content in MDX and use registered components directly.</p>
  </ExpandablePanel>
  <ExpandablePanel title="Browser state" summaryVariant="subtle">
    <p>Mount a RegorApp when a sample needs reactive state.</p>
  </ExpandablePanel>
</Flex>

A custom summary

Replace the generated summary content while preserving the native summary element.

Build report Passing

The documentation build completed successfully.

<ExpandablePanel tone="success">
  <template #summary>
    <Flex align="center" justify="between" wrap="true">
      <strong>Build report</strong>
      <Badge tone="success">Passing</Badge>
    </Flex>
  </template>
  <p>The documentation build completed successfully.</p>
</ExpandablePanel>

Behavior and accessibility

Focus the summary and press Enter or Space to toggle it. Do not put nested buttons or links inside a summary. The native toggle event reports open state; the open prop sets the element state but native user toggling does not write back to a parent ref automatically.

API reference

ExpandablePanel contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

description

RefOrValue<string>
Default
not set

Supporting description for the content.

meta

RefOrValue<string>
Default
not set

Secondary context such as an update time, limitation or reassurance.

badge

RefOrValue<string>
Default
not set

Optional compact label rendered with Badge.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

summaryVariant

RefOrValue<ComponentVariant>
Default
surface

Independent visual treatment for the stateful summary.

open

RefOrValue<boolean>
Default
false

Initial or externally bound native details open state. Listen to toggle if application state must track user changes.

Composition

Default slot: disclosure body. summary: replaces the generated icon, title, description and badge row. Register defineExpandablePanelComponents and its Panel, Flex, Badge and Icon dependencies.