`<c-accordion>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <c-accordion v-model="expanded">
    <c-accordion-item heading="Project billing" value="billing">
      <p>Billing units are deducted monthly based on the resources in use.</p>
    </c-accordion-item>

    <c-accordion-item heading="Members and roles" value="members">
      <p>Invite members by email and assign them a role in the project.</p>
    </c-accordion-item>

    <c-accordion-item heading="Data storage" value="storage">
      <p>Allas object storage is available to every project by default.</p>
    </c-accordion-item>
  </c-accordion>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const expanded = ref<'billing' | 'members' | 'storage'>('billing');
</script>

Custom style

Vue

React

Angular

TypeScript

<template>
  <c-accordion v-model="expanded" class="custom-style">
    <c-accordion-item heading="Project billing" value="billing">
      <p>Billing units are deducted monthly based on the resources in use.</p>
    </c-accordion-item>

    <c-accordion-item heading="Members and roles" value="members">
      <p>Invite members by email and assign them a role in the project.</p>
    </c-accordion-item>

    <c-accordion-item heading="Data storage" value="storage">
      <p>Allas object storage is available to every project by default.</p>
    </c-accordion-item>
  </c-accordion>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const expanded = ref<'billing' | 'members' | 'storage'>('billing');
</script>

<style>
:root,
:root[data-theme='light'] {
  --accordion-content-background: var(--c-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accordion-content-background: color-mix(
      in srgb,
      var(--c-primary) 20%,
      transparent
    );
  }
}

:root[data-theme='dark'] {
  --accordion-content-background: color-mix(
    in srgb,
    var(--c-primary) 20%,
    transparent
  );
}

c-accordion.custom-style {
  c-accordion-item {
    &::part(root) {
      border: 1px solid var(--c-border);
    }

    &::part(header) {
      background-color: transparent;
    }

    &::part(content) {
      margin: 8px;
      padding: 8px;
      border-radius: 4px;
      background-color: var(--accordion-content-background);
    }

    &[expanded]::part(root) {
      border-color: var(--c-primary);
      background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
    }
  }
}
</style>

Multiple

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-accordion multiple outlined>
      <c-accordion-item heading="Project billing" value="billing">
        <p>Billing units are deducted monthly based on the resources in use.</p>
      </c-accordion-item>

      <c-accordion-item heading="Members and roles" value="members">
        <p>Invite members by email and assign them a role in the project.</p>
      </c-accordion-item>

      <c-accordion-item heading="Data storage" value="storage">
        <p>Allas object storage is available to every project by default.</p>
      </c-accordion-item>
    </c-accordion>
  </div>
</template>

Basic · c-accordion-item

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-accordion>
      <c-accordion-item heading="Project billing" value="billing">
        <c-icon slot="icon" :path="mdiCreditCardOutline" />

        <p>Billing units are deducted monthly based on the resources in use.</p>
      </c-accordion-item>

      <c-accordion-item heading="Members and roles" value="members">
        <c-icon slot="icon" :path="mdiAccountGroup" />

        <p>Invite members by email and assign them a role in the project.</p>
      </c-accordion-item>

      <c-accordion-item heading="Data storage" value="storage">
        <c-icon slot="icon" :path="mdiDatabase" />

        <p>Allas object storage is available to every project by default.</p>
      </c-accordion-item>
    </c-accordion>
  </div>
</template>

<script setup lang="ts">
import { mdiAccountGroup, mdiCreditCardOutline, mdiDatabase } from '@mdi/js';
</script>

Custom header · c-accordion-item

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-accordion>
      <c-accordion-item value="members">
        <div slot="header" class="member-header">
          <span>Members and roles</span>

          <span class="member-header-meta">3 pending invites</span>
        </div>

        <p>Invite members by email and assign them a role in the project.</p>
      </c-accordion-item>

      <c-accordion-item heading="Data storage" value="storage">
        <p>Allas object storage is available to every project by default.</p>
      </c-accordion-item>
    </c-accordion>
  </div>
</template>

<style>
/* Slotted header content is light DOM: style it with your own CSS. It
   inherits the header's text color, so it matches a plain `heading`. */
.member-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 500;
}

.member-header-meta {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--c-on-surface-muted);
}
</style>

API reference

`<c-accordion>`

Properties

Property	Attribute	Type	Default	Description
`mandatory`	`mandatory`	`boolean`	`false`	Disallow collapsing all the items
`multiple`	`multiple`	`boolean`	`false`	Allow expanding multiple items
`outlined`	`outlined`	`boolean`	`false`	Show an outline around expanded items
`value`	—	`AccordionValue`	`null`	Value of the accordion

Events

Event	Detail	Description
`change`	`AccordionValue`	Fired when the expansion state changes, carrying the new value as a bare `detail`: the expanded item's value, an array of values in `multiple` mode, or `null` when everything is collapsed.
`changeValue`	`AccordionValue`	Legacy value-change event carrying the new expansion value (kept for existing `@changeValue` listeners and the `v-control` directive). Also dispatched as `change-value` — bind that name in Vue templates.
`input`	`void`	Native bubbling input event dispatched alongside `changeValue` so a plain `v-model` works without `v-control`; carries no detail.
`update:value`	`AccordionValue`	Fired with the new expansion value whenever an item is toggled — the `v-model` contract.

Slots

Slot	Description
`default`	Default slot for the c-accordion-item components

CSS parts

Style from outside with c-accordion::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The outer wrapper stacking the accordion items vertically

`<c-accordion-item>`

Properties

Property	Attribute	Type	Default	Description
`collapsable`	`collapsable`	`boolean`	`false`	Marks the item as collapsable
`expanded`	`expanded`	`boolean`	`false`	Expansion status of the item
`heading`	`heading`	`string`	`''`	Heading of the accordion item
`outlined`	`outlined`	`boolean`	`false`	Show an outline around the expanded item
`value`	`value`	`number \| string`	—	Value of the accordion item

Events

Event	Detail	Description
`item-change`	`{ expanded: boolean; value: number \| string \| undefined }`	Fired when the header is toggled, carrying the requested expansion state and the item's `value`; bubbles so the parent `<c-accordion>` can update its model.

Slots

Slot	Description
`header`	Custom header slot
`icon`	Icon shown in the header before the heading
`default`	Default slot

CSS parts

Style from outside with c-accordion-item::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The outer wrapper of the item, carries the rounding and the outline when outlined
`header`	The toggle button row containing the icon, heading and indicator
`indicator`	The rotating chevron at the end of the header
`content`	The padded wrapper around the slotted content inside the collapsing region