If the sections are equal in weight and the reader switches between them, take CdsTabs. For a hierarchy of nested nodes take CdsTree, and for a block that simply separates content — CdsCard.

Anatomy

Panels always live inside a CdsExpandablePanels group: it keeps track of which panels are open and shares the common settings. Each panel is a title button with a state icon plus the content it reveals.

Storybook

Variations

Panel group

CdsExpandablePanel does not work without the CdsExpandablePanels wrapper — the group is what handles expansion. A simple panel is built from the title and text props, without slots. By default one panel stays open: opening the next one collapses the previous.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel
      title="Условия доставки"
      text="Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита."
    />
    <CdsExpandablePanel
      title="Способы оплаты"
      text="Оплатите картой онлайн или запросите счёт — он придёт на почту в течение часа."
    />
    <CdsExpandablePanel
      title="Возврат"
      text="Вернуть товар можно в течение 14 дней после получения, если он не был в использовании."
    />
  </CdsExpandablePanels>
</template>

Appearance

The appearance prop sets the background of the panels: primary for a regular page, secondary for a colored backdrop, transparent when the panel sits inside an already styled block (a card, a sidebar).

The gap prop changes the spacing between panels — it accepts a number or a string with CSS units.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';

const appearances = ['primary', 'secondary', 'transparent'] as const;

const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
</script>

<template>
  <div class="m-auto flex max-w-[500px] flex-col gap-4">
    <CdsExpandablePanels v-for="appearance in appearances" :key="appearance" :appearance="appearance">
      <CdsExpandablePanel :title="`Внешний вид ${appearance}`" :text="text" />
      <CdsExpandablePanel title="Способы оплаты" text="Оплатите картой онлайн или запросите счёт." />
    </CdsExpandablePanels>
  </div>
</template>

Layout

The variant="accordion" prop removes the spacing and glues the panels into a single block with shared rounded corners. A list of several questions then reads as one table instead of a set of cards.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
</script>

<template>
  <CdsExpandablePanels variant="accordion" class="m-auto max-w-[500px]">
    <CdsExpandablePanel
      title="Условия доставки"
      text="Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита."
    />
    <CdsExpandablePanel
      title="Способы оплаты"
      text="Оплатите картой онлайн или запросите счёт — он придёт на почту в течение часа."
    />
    <CdsExpandablePanel
      title="Возврат"
      text="Вернуть товар можно в течение 14 дней после получения, если он не был в использовании."
    />
  </CdsExpandablePanels>
</template>

Expansion

The multiple prop allows several panels to stay open at once. Through v-model you read and set what is expanded: the index of the panel (or its value) in the regular mode, and an array in multiple. The mandatory prop forbids collapsing the last open panel, and max limits how many can be expanded at the same time.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
import { ref } from 'vue';

const opened = ref<number[]>([0]);

const sections = [
  { title: 'Условия доставки', text: 'Курьер привезёт заказ в течение трёх рабочих дней.' },
  { title: 'Способы оплаты', text: 'Оплатите картой онлайн или запросите счёт.' },
  { title: 'Возврат', text: 'Вернуть товар можно в течение 14 дней после получения.' }
];
</script>

<template>
  <div class="m-auto flex max-w-[500px] flex-col gap-2">
    <span class="text-content-secondary">Раскрыты: {{ opened }}</span>

    <CdsExpandablePanels v-model="opened" multiple>
      <CdsExpandablePanel
        v-for="(section, index) in sections"
        :key="index"
        :value="index"
        :title="section.title"
        :text="section.text"
      />
    </CdsExpandablePanels>
  </div>
</template>

States

The disabled prop blocks a single panel when set on the panel, and all of them when set on the group: the title stops responding and loses contrast. The readonly prop leaves the panels in their current state — use it in a view mode where the content has to be visible but there is nothing to toggle.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';

const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
</script>

<template>
  <div class="m-auto flex max-w-[500px] flex-col gap-4">
    <CdsExpandablePanels>
      <CdsExpandablePanel title="Доступная панель" :text="text" />
      <CdsExpandablePanel disabled title="Заблокированная панель" :text="text" />
    </CdsExpandablePanels>

    <CdsExpandablePanels disabled>
      <CdsExpandablePanel title="Вся группа заблокирована" :text="text" />
      <CdsExpandablePanel title="Способы оплаты" text="Оплатите картой онлайн или запросите счёт." />
    </CdsExpandablePanels>

    <CdsExpandablePanels readonly :model-value="0">
      <CdsExpandablePanel title="Только для чтения — панель раскрыта и не сворачивается" :text="text" />
    </CdsExpandablePanels>
  </div>
</template>

Icons

The state icon comes from the expand-icon and collapse-icon props — on the group, on the panel or on an individual title; the value from the closest level wins. The action slot of the title replaces the icon entirely and receives the state of the panel, and hide-actions removes it altogether.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsExpandablePanel,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsIcon
} from '@central-design-system/components';

const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel title="Иконки на панели" expand-icon="add" collapse-icon="minus" :text="text" />

    <CdsExpandablePanel :text="text">
      <CdsExpandablePanelTitle expand-icon="chevron-right" collapse-icon="chevron-down">
        Иконки на заголовке
      </CdsExpandablePanelTitle>
    </CdsExpandablePanel>

    <CdsExpandablePanel :text="text">
      <CdsExpandablePanelTitle>
        Своя разметка в слоте action

        <template #action="{ expanded }">
          <CdsIcon :name="expanded ? 'visibility-off' : 'visibility'" />
        </template>
      </CdsExpandablePanelTitle>
    </CdsExpandablePanel>

    <CdsExpandablePanel hide-actions title="Без иконки" :text="text" />
  </CdsExpandablePanels>
</template>

Slots

The title and text props are enough for a text panel. As soon as the title needs a counter, a status or an icon, assemble it from CdsExpandablePanelTitle and CdsExpandablePanelContent.

Slot	Description
CdsExpandablePanels → default	Panels of the group. Slot props carry the next and prev navigation
CdsExpandablePanel → title	Title content. Replaces the text from title
CdsExpandablePanel → text	Expandable content. Replaces the text from text
CdsExpandablePanelTitle → default	Title content. Slot props: expanded, disabled, readonly
CdsExpandablePanelTitle → action	Expansion icon. Slot props: the same panel state

Sandbox Storybook

<script setup lang="ts">
import {
  CdsBadge,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsIcon,
  CdsLink,
  CdsTag
} from '@central-design-system/components';
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>
        <div class="flex w-full items-center gap-1">
          <CdsIcon name="file" />
          <span>Документы</span>
          <CdsBadge inline :content="12" />
        </div>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col gap-1">
          <CdsLink href="#" text="Договор поставки.pdf" />
          <CdsLink href="#" text="Спецификация.xlsx" />
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Статус заявки</span>
            <span v-if="!expanded" class="text-content-secondary">На согласовании у трёх участников</span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-wrap gap-1">
          <CdsTag text="Иванов — согласовано" />
          <CdsTag text="Петрова — в работе" />
          <CdsTag text="Сидоров — ждёт" />
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>
  </CdsExpandablePanels>
</template>

Guidelines

Storybook

Scenarios

Questions and answers

The classic case for accordion: the whole list of questions stays visible and an answer opens on click. Only one answer is open at a time, so the reader does not lose their place in the list. The content renders only after the first expansion; if the answers have to show up in search results, turn on eager.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';

const questions = [
  {
    title: 'Как оплатить заказ по счёту?',
    text: 'Выберите оплату по счёту при оформлении — документ придёт на почту в течение часа. Заказ уйдёт в работу после поступления денег.'
  },
  {
    title: 'Можно ли изменить состав заказа после оформления?',
    text: 'Пока заказ не передан в доставку, состав можно изменить в личном кабинете. После передачи курьеру изменения принимает только служба поддержки.'
  },
  {
    title: 'Сколько идёт доставка в регионы?',
    text: 'От трёх до семи рабочих дней в зависимости от региона. Точный срок появится на странице заказа после сборки.'
  },
  {
    title: 'Как вернуть товар?',
    text: 'Оставьте заявку на возврат в течение 14 дней после получения. Деньги вернутся тем же способом, которым вы платили.'
  }
];
</script>

<template>
  <CdsExpandablePanels variant="accordion" class="m-auto max-w-[560px]">
    <CdsExpandablePanel
      v-for="question in questions"
      :key="question.title"
      :title="question.title"
      :text="question.text"
    />
  </CdsExpandablePanels>
</template>

Form with a summary

The title shows the current value, and the expanded panel holds the field that changes it. The default slot of the title receives expanded, so the caption can change on the fly. Such a form takes little space and keeps what has already been filled in visible.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDatePicker,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsSelect,
  CdsTextInput
} from '@central-design-system/components';
import { computed, ref, unref } from 'vue';

const name = ref('На Байкал');
const selected = ref('third');
const dateRange = ref({ from: '01.01.2026', to: '10.01.2026' });

const items = ref([
  { title: 'Москва', value: 'first' },
  { title: 'Санкт-Петербург', value: 'second' },
  { title: 'Иркутск', value: 'third' }
]);

const cityName = computed(() => unref(items).find((item) => item.value === unref(selected))?.title);
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel>
      <CdsExpandablePanelTitle expand-icon="edit" collapse-icon="minus">
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Название путешествия</span>
            <span :class="['text-content-secondary', { italic: expanded }]">{{ name }}</span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <CdsTextInput v-model="name" hide-messages label="Название" placeholder="Введите название" />
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle expand-icon="pin" collapse-icon="minus">
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Город поездки</span>
            <span :class="['text-content-secondary', { italic: expanded }]">{{ cityName }}</span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <CdsSelect v-model="selected" :items="items" placeholder="Выберите город" hide-messages />
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle expand-icon="time" collapse-icon="minus">
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Даты поездки</span>
            <span :class="['text-content-secondary', { italic: expanded }]">
              {{ dateRange.from }}—{{ dateRange.to }}
            </span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <CdsDatePicker v-model="dateRange" range />
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>
  </CdsExpandablePanels>
</template>

Filters in a sidebar

Groups of filters in a side panel: multiple keeps the needed sections open, transparent removes the extra background, and a badge in the title shows how many conditions are selected in a collapsed group.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsBadge,
  CdsCheckbox,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle
} from '@central-design-system/components';
import { computed, ref } from 'vue';

const documents = [
  { name: 'Договор поставки № 14', type: 'Договор', status: 'Подписан' },
  { name: 'Счёт № 209', type: 'Счёт', status: 'Черновик' },
  { name: 'Акт сверки за июнь', type: 'Акт', status: 'Подписан' },
  { name: 'Договор аренды № 7', type: 'Договор', status: 'Черновик' },
  { name: 'Счёт № 218', type: 'Счёт', status: 'Подписан' }
];

const types = ['Договор', 'Счёт', 'Акт'];
const statuses = ['Подписан', 'Черновик'];

const selectedTypes = ref<string[]>(['Договор']);
const selectedStatuses = ref<string[]>([]);

const filtered = computed(() =>
  documents.filter(
    (document) =>
      (!selectedTypes.value.length || selectedTypes.value.includes(document.type)) &&
      (!selectedStatuses.value.length || selectedStatuses.value.includes(document.status))
  )
);
</script>

<template>
  <div class="m-auto flex w-[520px] max-w-full gap-4">
    <CdsExpandablePanels appearance="transparent" multiple :model-value="[0, 1]" class="w-[220px] shrink-0">
      <CdsExpandablePanel>
        <CdsExpandablePanelTitle>
          <div class="flex w-full items-center gap-1">
            <span>Тип</span>
            <CdsBadge v-if="selectedTypes.length" inline :content="selectedTypes.length" />
          </div>
        </CdsExpandablePanelTitle>

        <CdsExpandablePanelContent>
          <div class="flex flex-col gap-1">
            <CdsCheckbox
              v-for="type in types"
              :key="type"
              v-model="selectedTypes"
              :value="type"
              :label="type"
              hide-messages
            />
          </div>
        </CdsExpandablePanelContent>
      </CdsExpandablePanel>

      <CdsExpandablePanel>
        <CdsExpandablePanelTitle>
          <div class="flex w-full items-center gap-1">
            <span>Статус</span>
            <CdsBadge v-if="selectedStatuses.length" inline :content="selectedStatuses.length" />
          </div>
        </CdsExpandablePanelTitle>

        <CdsExpandablePanelContent>
          <div class="flex flex-col gap-1">
            <CdsCheckbox
              v-for="status in statuses"
              :key="status"
              v-model="selectedStatuses"
              :value="status"
              :label="status"
              hide-messages
            />
          </div>
        </CdsExpandablePanelContent>
      </CdsExpandablePanel>
    </CdsExpandablePanels>

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="document in filtered" :key="document.name">{{ document.name }}</li>
      <li v-if="!filtered.length" class="text-content-secondary">Ничего не найдено</li>
    </ul>
  </div>
</template>

Step-by-step filling

The group slot hands over next and prev — buttons inside a panel move the reader to the next step, while mandatory prevents closing all of the steps at once. For long wizards with per-step validation take CdsSteps.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsSelect,
  CdsTextInput
} from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(0);

const company = ref('');
const city = ref('first');
const contact = ref('');

const cities = [
  { title: 'Москва', value: 'first' },
  { title: 'Санкт-Петербург', value: 'second' },
  { title: 'Новосибирск', value: 'third' }
];
</script>

<template>
  <CdsExpandablePanels
    v-model="step"
    v-slot="{ next, prev }"
    variant="accordion"
    mandatory
    class="m-auto max-w-[500px]"
  >
    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>Шаг 1. Организация</CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col items-start gap-2">
          <CdsTextInput v-model="company" label="Название организации" hide-messages class="w-full" />
          <CdsButton text="Далее" @click="next" />
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>Шаг 2. Адрес</CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col items-start gap-2">
          <CdsSelect v-model="city" :items="cities" label="Город" hide-messages class="w-full" />

          <div class="flex gap-2">
            <CdsButton appearance="secondary" text="Назад" @click="prev" />
            <CdsButton text="Далее" @click="next" />
          </div>
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>Шаг 3. Контакт</CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col items-start gap-2">
          <CdsTextInput v-model="contact" label="Контактное лицо" hide-messages class="w-full" />

          <div class="flex gap-2">
            <CdsButton appearance="secondary" text="Назад" @click="prev" />
            <CdsButton text="Отправить" />
          </div>
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>
  </CdsExpandablePanels>
</template>

API

CdsExpandablePanels

Props

Name	Type	Default	Description
appearance	"primary" | "secondary" | "transparent" | undefined	'primary'	Appearance of the panels
collapseIcon	IconValue | undefined	'chevron-up'	Icon shown when the panel is expanded and can be collapsed
disabled	boolean | null | undefined	null	Disabled state
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
expandIcon	IconValue | undefined	'chevron-down'	Icon shown when the panel is collapsed and can be expanded
focusable	boolean | undefined	—	Highlights the title with a background on focus
gap	string | number | undefined	—	Spacing between the panels
hideActions	boolean | undefined	—	Hides the expand/collapse icon
hover	boolean | undefined	true	Highlights the title with a background on hover
mandatory	boolean | "force" | undefined	—	Requires at least one item to stay selected
max	number | undefined	—	Maximum number of items that can be selected
modelValue	any	—	Value of the selected items of the group
multiple	boolean | undefined	—	Allows selecting several items at once
readonly	boolean | null | undefined	null	Read-only state
required	boolean | "force" | undefined	—	Requires at least one item to stay selected
selectedClass	string | undefined	—	CSS class applied in the selected state
static	boolean | undefined	—	Turns off the animation of the title
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
variant	"default" | "accordion" | undefined	'default'	Display variant of the panel group

Events

Name	Type	Description
update:modelValue	[value: unknown]	Fires when the set of selected panels changes.

Slots

Name	Type	Description
default	CdsExpandablePanelsSlotProps	Panels of the group. The slot props carry the navigation between panels.

Exposed

Name	Type	Description
next	() => void	Expands the next panel
prev	() => void	Expands the previous panel

CdsExpandablePanel

Props

Name	Type	Default	Description
collapseIcon	IconValue | undefined	'chevron-up'	Icon shown when the panel is expanded and can be collapsed
disabled	boolean | null | undefined	null	Disabled state
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
expandIcon	IconValue | undefined	'chevron-down'	Icon shown when the panel is collapsed and can be expanded
focusable	boolean | undefined	—	Highlights the title with a background on focus
height	string | number | undefined	—	Component height
hideActions	boolean | undefined	—	Hides the expand/collapse icon
hover	boolean | undefined	true	Highlights the title with a background on hover
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
readonly	boolean | null | undefined	null	Read-only state
selectedClass	string | undefined	—	CSS class applied in the selected state
static	boolean | undefined	—	Turns off the animation of the title
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
text	string | undefined	—	Text of the expandable content of the panel
title	string | undefined	—	Text of the panel title
value	any	—	Value of the component within the group
width	string | number | undefined	—	Component width

Events

Name	Type	Description
group:selected	[value: { value: boolean; }]	Fires when the panel is expanded or collapsed.

Slots

Name	Type	Description
default	any	Arbitrary content of the panel.
text	any	Expandable content of the panel.
title	any	Content of the panel title.

Exposed

Name	Type	Description
isSelected	boolean	The panel is expanded
select	(value: boolean) => void	Expands or collapses the panel
toggle	() => void	Toggles the expansion of the panel

CdsExpandablePanelTitle

Props

Name	Type	Default	Description
collapseIcon	IconValue | undefined	'chevron-up'	Icon shown when the panel is expanded and can be collapsed
expandIcon	IconValue | undefined	'chevron-down'	Icon shown when the panel is collapsed and can be expanded
focusable	boolean | undefined	—	Highlights the title with a background on focus
height	string | number | undefined	—	Component height
hideActions	boolean | undefined	—	Hides the expand/collapse icon
hover	boolean | undefined	true	Highlights the title with a background on hover
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
readonly	boolean | null | undefined	null	Read-only state
static	boolean | undefined	—	Turns off the animation of the title
width	string | number | undefined	—	Component width

Slots

Name	Type	Description
action	CdsExpandablePanelTitleSlotProps	Expand/collapse icon. The slot props carry the state of the panel.
default	CdsExpandablePanelTitleSlotProps	Content of the title. The slot props carry the state of the panel.

Exposed

Name	Type	Description
isSelected	boolean	The panel is expanded
toggle	() => void	Toggles the expansion of the panel

CdsExpandablePanelContent

Props

Name	Type	Default	Description
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.

Slots

Name	Type	Description
default	any	Expandable content of the panel.