Accordion

Show and hide sections of content. Built on reka-ui's Accordion primitives — keyboard navigable, ARIA-compliant, follows the WAI-ARIA Accordion pattern.

Compose four pieces: Accordion (root, manages state), AccordionItem (each section, identified by value), AccordionTrigger (the clickable header), and AccordionContent (the collapsible body).

Single (one section open at a time)

EET, EPRA, GRI, INREV, GRESB, SECR, and UNPRI — plus any read-only or saved view in your workspace.

<Accordion type="single" collapsible default-value="reports">
  <AccordionItem value="reports">
    <AccordionTrigger>What reports does Scaler support?</AccordionTrigger>
    <AccordionContent>EET, EPRA, GRI, …</AccordionContent>
  </AccordionItem>
  <AccordionItem value="data">
    <AccordionTrigger>How is data persisted?</AccordionTrigger>
    <AccordionContent>Through the persistence adapter…</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple (several open at a time)

What this guide covers and who it's for.

How to install and integrate the package.

<Accordion type="multiple" :default-value="['intro', 'usage']">
  <AccordionItem value="intro">
    <AccordionTrigger>Introduction</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
  <AccordionItem value="usage">
    <AccordionTrigger>Usage</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Disabled item

<AccordionItem value="locked" disabled>
  <AccordionTrigger>Locked section</AccordionTrigger>
  <AccordionContent>…</AccordionContent>
</AccordionItem>

Controlled

Bind model-value for full control over which items are open.

<Accordion type="single" v-model:model-value="open">
  <AccordionItem value="intro">…</AccordionItem>
  <AccordionItem value="usage">…</AccordionItem>
</Accordion>

open is Ref<string> for type="single" and Ref<string[]> for type="multiple".

Show / hide hints

AccordionTrigger accepts showHintLabel and hideHintLabel to surface a contextual hint that swaps based on the open state. Useful when the chevron alone doesn't communicate enough ("Show details" / "Hide details").

<AccordionTrigger show-hint-label="Show" hide-hint-label="Hide">
  Performance details
</AccordionTrigger>

Custom trigger icon

Replace the default chevron via the trigger's icon slot.

<AccordionTrigger>
  Custom Icon Example
  <template #icon>
    <Icon name="plus" :size="20" />
  </template>
</AccordionTrigger>

Accordion — Props

Prop	Type	Default	Description
type	'single' | 'multiple'	required	Open one item at a time, or many.
modelValue	string | string[]	—	Two-way bound open value(s). For type="single" use string; for type="multiple" use string[].
defaultValue	string | string[]	—	Initial open value(s) when uncontrolled.
collapsible	boolean	false	(single only) Allow closing the currently-open item.
disabled	boolean	false	Disable the entire accordion.
dir	'ltr' | 'rtl'	'ltr'	Reading direction.
orientation	'vertical' | 'horizontal'	'vertical'	Layout orientation.

AccordionItem — Props

Prop	Type	Default	Description
value	string	required	Identifier used by the parent Accordion's model-value.
disabled	boolean	false	Disable just this item.
class	string	—	Additional classes (merged via tailwind-merge).

AccordionTrigger — Props and Slots

Prop	Type	Default	Description
showHintLabel	string	—	Hint text rendered when the item is closed (e.g. "Show"). Hidden when open.
hideHintLabel	string	—	Hint text rendered when the item is open (e.g. "Hide"). Hidden when closed.
class	string	—	Additional classes for the trigger.

Slot	Description
default	The trigger label content.
icon	Custom icon to replace the default rotating chevron.

AccordionTrigger also forwards reka-ui's AccordionTriggerProps.

AccordionContent — Props and Slots

Prop	Type	Default	Description
class	string	—	Additional classes for the inner padded wrapper.

Slot	Description
default	Body content shown when the item is expanded.

AccordionContent also forwards reka-ui's AccordionContentProps.

Events

Event	Description
update:modelValue	Emitted when the open state changes.

Accordion extends reka-ui's AccordionRoot props — see reka-ui Accordion docs for the full underlying API including onValueChange, focus management, etc.