For a bar of sections take the ready CdsTabs, for picking tags take CdsTagGroup, and to page through slides one by one take CdsSlideView.

Anatomy

Arrow buttons sit at the edges of the container, and the strip of elements scrolls between them. The arrows appear only when the strip does not fit into the container, and they page it by the width of the visible area.

Storybook

Variations

Scrolling and arrows

By default the arrows appear on a desktop when the elements do not fit into the container; on mobile the strip is scrolled with a finger without arrows. The show-arrows prop changes this behavior: true shows the arrows on overflow and on mobile, desktop and mobile always show them on the matching devices, always always shows them, never never does.

Sandbox Storybook

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

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup show-arrows>
      <CdsSlideGroupItem v-for="n in 15" :key="n">
        <CdsButton variant="soft" color="neutral" class="m-1" :text="`Элемент ${n}`" />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Selecting elements

Wrap the elements into CdsSlideGroupItem and the group starts driving the selection: v-model holds the value of the selected element from its value prop. CdsSlideGroupItem itself renders nothing — its slot receives isSelected and toggle, and how to show the selected state is up to you. The mandatory prop forbids clearing the last selection.

Sandbox Storybook

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

const selected = ref(1);
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup v-model="selected" mandatory show-arrows>
      <CdsSlideGroupItem v-for="n in 12" :key="n" v-slot="{ isSelected, toggle }" :value="n">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="`Элемент ${n}`"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

The multiple prop allows selecting several elements — v-model becomes an array, and max limits the number of selected ones.

Sandbox Storybook

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

const selected = ref([1, 3]);
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup v-model="selected" multiple :max="3" show-arrows>
      <CdsSlideGroupItem v-for="n in 12" :key="n" v-slot="{ isSelected, toggle }" :value="n">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="`Элемент ${n}`"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

The active element in the center

When the selection changes, the strip scrolls to the active element itself — that is the job of scroll-to-active, which is on by default. The center-active prop additionally keeps the active element in the center of the container.

Sandbox Storybook

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

const selected = ref(10);
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup v-model="selected" center-active mandatory show-arrows>
      <CdsSlideGroupItem v-for="n in 20" :key="n" v-slot="{ isSelected, toggle }" :value="n">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="`Элемент ${n}`"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Vertical group

The direction="vertical" prop turns the strip into a column — limit its height with max-height on the group itself.

Sandbox Storybook

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

<template>
  <div class="m-auto flex justify-center">
    <CdsSlideGroup direction="vertical" show-arrows class="max-h-[220px]">
      <CdsSlideGroupItem v-for="n in 12" :key="n">
        <CdsButton variant="soft" color="neutral" class="m-1" :text="`Элемент ${n}`" />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Slots

Slot	Description
default	The elements of the strip, usually CdsSlideGroupItem
prev	Your own content for the "back" button instead of the arrow
next	Your own content for the "forward" button instead of the arrow

All the slots receive the prev, next, select and isSelected methods. The click on the area of an arrow is handled by the group itself, so it is enough to put the visuals only into prev / next. The icons of the default arrows are changed without slots — with the prev-icon and next-icon props.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsFunctionalButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup show-arrows="always">
      <template #prev>
        <CdsFunctionalButton icon="arrow-left" aria-label="Назад" />
      </template>

      <CdsSlideGroupItem v-for="n in 15" :key="n">
        <CdsButton variant="soft" color="neutral" class="m-1" :text="`Элемент ${n}`" />
      </CdsSlideGroupItem>

      <template #next>
        <CdsFunctionalButton icon="arrow-right" aria-label="Вперёд" />
      </template>
    </CdsSlideGroup>
  </div>
</template>

Guidelines

Storybook

Scenarios

Booking an appointment

Two slide groups with a selection: the strip of days with center-active keeps the selected date in the center, and the strip of times is more compact — with size="sm" buttons. Both lists use mandatory: a booking always has a selected date and time.

Sandbox Storybook

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

const days = [
  { value: '04.08', label: 'Пн, 4 авг' },
  { value: '05.08', label: 'Вт, 5 авг' },
  { value: '06.08', label: 'Ср, 6 авг' },
  { value: '07.08', label: 'Чт, 7 авг' },
  { value: '08.08', label: 'Пт, 8 авг' },
  { value: '11.08', label: 'Пн, 11 авг' },
  { value: '12.08', label: 'Вт, 12 авг' },
  { value: '13.08', label: 'Ср, 13 авг' }
];
const times = ['09:00', '10:00', '11:00', '12:00', '14:00', '15:00', '16:00', '17:00'];

const day = ref('06.08');
const time = ref('11:00');

const dayLabel = computed(() => days.find((item) => item.value === day.value)?.label);
</script>

<template>
  <div class="m-auto flex w-full max-w-[440px] flex-col gap-2">
    <CdsSlideGroup v-model="day" center-active mandatory show-arrows>
      <CdsSlideGroupItem v-for="item in days" :key="item.value" v-slot="{ isSelected, toggle }" :value="item.value">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="item.label"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>

    <CdsSlideGroup v-model="time" mandatory show-arrows>
      <CdsSlideGroupItem v-for="item in times" :key="item" v-slot="{ isSelected, toggle }" :value="item">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          color="brand"
          size="sm"
          class="m-1"
          :text="item"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>

    <p class="m-0 text-center text-200 text-content-secondary">Встреча: {{ dayLabel }} в {{ time }}</p>
  </div>
</template>

A strip of documents

The slide group works without a selection too — as a regular scrollable strip. The cards go straight into the default slot without CdsSlideGroupItem, and the arrows page the strip by the width of the visible area.

Sandbox Storybook

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

const documents = [
  { title: 'Договор поставки', date: '28.07.2026' },
  { title: 'Спецификация № 4', date: '25.07.2026' },
  { title: 'Акт сверки', date: '21.07.2026' },
  { title: 'Счёт № 1042', date: '18.07.2026' },
  { title: 'Протокол разногласий', date: '14.07.2026' },
  { title: 'Коммерческое предложение', date: '10.07.2026' }
];
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup show-arrows>
      <div
        v-for="document in documents"
        :key="document.title"
        class="m-1 flex w-[160px] flex-col gap-1 rounded-200 bg-surface-secondary p-3"
      >
        <CdsIcon icon="file" />
        <span class="text-200">{{ document.title }}</span>
        <span class="text-100 text-content-secondary">{{ document.date }}</span>
      </div>
    </CdsSlideGroup>
  </div>
</template>

A formatting bar

A toolbar inside a narrow container: icon buttons with aria-label, multiple allows turning several formats on at once, and the show-arrows="always" arrows page through the tools that did not fit.

Sandbox Storybook

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

const formats = ref(['bold']);

const tools = [
  { value: 'bold', icon: 'bold', label: 'Жирный' },
  { value: 'italic', icon: 'italic', label: 'Курсив' },
  { value: 'underline', icon: 'underline', label: 'Подчёркнутый' },
  { value: 'highlight', icon: 'highlight', label: 'Маркер' },
  { value: 'list', icon: 'list-bullet', label: 'Список' },
  { value: 'link', icon: 'link', label: 'Ссылка' },
  { value: 'formula', icon: 'formula', label: 'Формула' },
  { value: 'insert', icon: 'paste', label: 'Вставка' }
];
</script>

<template>
  <div class="m-auto max-w-[280px]">
    <CdsSlideGroup v-model="formats" multiple show-arrows="always">
      <CdsSlideGroupItem v-for="tool in tools" :key="tool.value" v-slot="{ isSelected, toggle }" :value="tool.value">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          size="sm"
          class="m-1"
          :icon="tool.icon"
          :aria-label="tool.label"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

API

CdsSlideGroup

Props

Name	Type	Default	Description
centerActive	boolean | undefined	—	Forces the active component to be aligned to the center.
contentClass	any	—	Adds classes to the slide group container
contentStyle	any	—	Adds inline styles to the slide group container
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
mandatory	boolean | "force" | undefined	—	Requires at least one item to stay selected
max	number | undefined	—	Maximum number of items that can be selected
mobile	boolean | null | undefined	null	Determines the display mode of the component: true renders it in mobile mode, false in desktop mode, null makes the mode depend on the current breakpoint.
mobileBreakpoint	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	—	Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (xs, sm, md, lg, xl).
modelValue	any	—	Value of the selected items of the group
multiple	boolean | undefined	—	Allows selecting several items at once
nextIcon	IconValue | undefined	'chevron-right'	Icon for the “next” button.
prevIcon	IconValue | undefined	'chevron-left'	Icon for the “previous” button.
required	boolean | "force" | undefined	—	Requires at least one item to stay selected
scrollToActive	boolean | undefined	true	When true, the container scrolls the active component into view whenever it changes.
selectedClass	string | undefined	'cds-slide-group-item--active'	CSS class applied in the selected state
showArrows	string | boolean | undefined	—	Changes how the arrows are shown. By default the arrows appear on desktop devices when the container overflows and stay hidden on mobile devices. true also shows them on mobile on overflow, desktop always shows them on desktop, mobile always on mobile, always on both, and never disables the arrows.
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render

Slots

Name	Type	Description
default	SlideGroupSlot	Slot for the CdsSlideGroupItem components
next	SlideGroupSlot	Slot for the "next" button.
prev	SlideGroupSlot	Slot for the "previous" button.

Exposed

Name	Type	Description
focus	(location?: "next" | "prev" | "first" | "last" | undefined) => void	Focuses the component
hasNext	boolean	Returns true if there are elements after the current index.
hasPrev	boolean	Returns true if there are elements before the current index.
scrollOffset	number	Returns the scroll offset of the element
scrollTo	(location: "next" | "prev") => void	Scrolls to the element by its index
selected	readonly string[]	Returns the index of the selected element

CdsSlideGroupItem

Props

Name	Type	Default	Description
disabled	boolean | null | undefined	null	Disabled state
selectedClass	string | undefined	—	CSS class applied in the selected state
value	any	—	Value of the component within the group

Events

Name	Type	Description
group:selected	[value: { value: boolean; }]	Fires when an element is selected inside the group.

Slots

Name	Type	Description
default	{ isSelected: boolean; select: (value: boolean) => void; toggle: () => void; selectedClass: false | (string | undefined)[]; }	Slot for the content