Если выбор нужно оформить кнопками, возьмите CdsButtonToggle. Для выбора из длинного списка подойдёт CdsSelect, а отдельные независимые теги без выбора — просто CdsTag.

Вариации

Выбор

Каждому тегу задайте value — именно оно попадёт в v-model. Без value значением становится индекс тега в группе. Повторный клик по выбранному тегу снимает выбор.

Sandbox Storybook

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

const categories = ['Электроника', 'Одежда', 'Мебель', 'Спорт', 'Книги'];
const selected = ref('Электроника');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTagGroup v-model="selected">
      <CdsTag v-for="category in categories" :key="category" :value="category" :text="category" />
    </CdsTagGroup>

    <span class="text-100 text-content-secondary">Выбрано: {{ selected ?? '—' }}</span>
  </div>
</template>

Множественный выбор

Свойство multiple разрешает выбрать несколько тегов — v-model становится массивом значений.

Sandbox Storybook

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

const deliveries = ['Самовывоз', 'Курьер', 'Почта', 'Транспортная компания'];
const selected = ref(['Курьер', 'Почта']);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTagGroup v-model="selected" multiple>
      <CdsTag v-for="delivery in deliveries" :key="delivery" :value="delivery" :text="delivery" />
    </CdsTagGroup>

    <span class="text-100 text-content-secondary">Выбрано: {{ selected.join(', ') || '—' }}</span>
  </div>
</template>

Свойство max ограничивает число выбранных тегов: когда лимит достигнут, клики по остальным тегам не добавляют выбор.

Sandbox Storybook

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

const deliveries = ['Самовывоз', 'Курьер', 'Почта', 'Транспортная компания'];
const selected = ref(['Курьер']);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTagGroup v-model="selected" multiple :max="2">
      <CdsTag v-for="delivery in deliveries" :key="delivery" :value="delivery" :text="delivery" />
    </CdsTagGroup>

    <span class="text-100 text-content-secondary">Выбрано {{ selected.length }} из 2</span>
  </div>
</template>

Обязательный выбор

Свойство mandatory не даёт снять последний выбор: тег можно только переключить. Со значением 'force' первый доступный тег выбирается автоматически, даже если v-model пуст.

Sandbox Storybook

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

const periods = ['Неделя', 'Месяц', 'Квартал', 'Год'];
const selected = ref('Месяц');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTagGroup v-model="selected" mandatory>
      <CdsTag v-for="period in periods" :key="period" :value="period" :text="period" />
    </CdsTagGroup>

    <span class="text-100 text-content-secondary">
      Период: {{ selected }} — снять выбор нельзя, можно только переключить
    </span>
  </div>
</template>

Индикатор выбора

Свойство filter добавляет выбранным тегам иконку-галочку — выбор читается не только по заливке. Иконку меняет filter-icon тега, а слот filter заменяет её своей разметкой.

Sandbox Storybook

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

const statuses = ['Черновики', 'На проверке', 'Опубликованные', 'В архиве'];
const selected = ref(['На проверке']);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTagGroup v-model="selected" multiple filter>
      <CdsTag v-for="status in statuses" :key="status" :value="status" :text="status" />
    </CdsTagGroup>

    <span class="text-100 text-content-secondary">Выбрано: {{ selected.join(', ') || '—' }}</span>
  </div>
</template>

Цвет и блокировка

Свойства color, active-color, disabled и filter группа проставляет своим тегам как значения по умолчанию — повторять их на каждом теге не нужно. color красит невыбранные теги, active-color — выбранный; без него выбранный тег остаётся брендовым, чтобы выбор читался при любой палитре. disabled блокирует всю группу: выбор виден, но переключить его нельзя. Свойство, заданное прямо на теге, побеждает значение группы.

Sandbox Storybook

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

const formats = ['Отчёт', 'Презентация', 'Таблица'];
const colored = ref('Отчёт');
const active = ref('Отчёт');
const locked = ref('Презентация');
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">color — цвет невыбранных тегов</span>

      <CdsTagGroup v-model="colored" color="red">
        <CdsTag v-for="format in formats" :key="format" :value="format" :text="format" />
      </CdsTagGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">active-color — цвет выбранного тега</span>

      <CdsTagGroup v-model="active" color="green" active-color="red">
        <CdsTag v-for="format in formats" :key="format" :value="format" :text="format" />
      </CdsTagGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">disabled — выбор сохраняется, но недоступен</span>

      <CdsTagGroup v-model="locked" disabled>
        <CdsTag v-for="format in formats" :key="format" :value="format" :text="format" />
      </CdsTagGroup>
    </div>
  </div>
</template>

Компоновка

По умолчанию теги стоят в один ряд, а лишние уезжают в горизонтальную прокрутку со стрелками: группа построена на CdsSlideGroup и принимает его свойства — show-arrows, direction, center-active. Свойство column переносит теги по строкам вместо прокрутки — так все варианты видны сразу.

Sandbox Storybook

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

const categories = ['Электроника', 'Бытовая техника', 'Одежда', 'Обувь', 'Мебель', 'Спорт', 'Книги', 'Игрушки'];

const scrolled = ref('Электроника');
const wrapped = ref('Электроника');
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-1 text-content-secondary">По умолчанию — горизонтальная прокрутка со стрелками</span>

      <CdsTagGroup v-model="scrolled">
        <CdsTag v-for="category in categories" :key="category" :value="category" :text="category" />
      </CdsTagGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-1 text-content-secondary">column — перенос по строкам</span>

      <CdsTagGroup v-model="wrapped" column>
        <CdsTag v-for="category in categories" :key="category" :value="category" :text="category" />
      </CdsTagGroup>
    </div>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Фильтр каталога

Строка категорий над выдачей — самая частая работа группы тегов. column показывает все категории сразу, mandatory не даёт остаться без фильтра, а v-model даёт готовый ключ для запроса товаров.

Sandbox Storybook

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

const products = [
  { name: 'Ноутбук Alfa 14', category: 'Ноутбуки', price: '68 900 ₽' },
  { name: 'Ноутбук Beta Pro', category: 'Ноутбуки', price: '94 500 ₽' },
  { name: 'Смартфон Gamma 5', category: 'Смартфоны', price: '32 400 ₽' },
  { name: 'Смартфон Delta Mini', category: 'Смартфоны', price: '21 900 ₽' },
  { name: 'Монитор Epsilon 27"', category: 'Мониторы', price: '27 300 ₽' }
];

const categories = ['Все', 'Ноутбуки', 'Смартфоны', 'Мониторы'];
const category = ref('Все');

const filtered = computed(() =>
  category.value === 'Все' ? products : products.filter((product) => product.category === category.value)
);
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-2">
    <CdsTagGroup v-model="category" column mandatory>
      <CdsTag v-for="item in categories" :key="item" :value="item" :text="item" />
    </CdsTagGroup>

    <div class="flex flex-col gap-1">
      <div
        v-for="product in filtered"
        :key="product.name"
        class="flex items-center justify-between rounded-200 bg-surface-secondary p-2"
      >
        <span>{{ product.name }}</span>
        <span class="text-100 text-content-secondary">{{ product.price }}</span>
      </div>
    </div>

    <span class="text-100 text-content-secondary">Найдено товаров: {{ filtered.length }}</span>
  </div>
</template>

Выбор нескольких тем

Когда значения не исключают друг друга, включите multiple. max держит выбор в разумных границах, filter отмечает выбранные темы галочкой, а подпись под группой объясняет лимит.

Sandbox Storybook

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

const topics = ['Аналитика', 'Дизайн', 'Разработка', 'Маркетинг', 'Продажи', 'Логистика', 'Поддержка'];
const selected = ref(['Дизайн']);

const isFull = computed(() => selected.value.length >= 3);
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-2">
    <span>Выберите до трёх тем — по ним будем присылать дайджест</span>

    <CdsTagGroup v-model="selected" column multiple filter :max="3">
      <CdsTag v-for="topic in topics" :key="topic" :value="topic" :text="topic" />
    </CdsTagGroup>

    <span class="text-100" :class="isFull ? 'text-content-secondary' : 'text-content-tertiary'">
      {{ isFull ? 'Лимит достигнут — снимите тему, чтобы выбрать другую' : `Выбрано ${selected.length} из 3` }}
    </span>
  </div>
</template>

Переключение периода

Группа отдаёт наружу методы next, prev, select и список selected — получите их через ref на компоненте. Так к тегам добавляются стрелки «назад / вперёд», которые листают периоды по порядку.

Sandbox Storybook

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

const revenue: Record<string, string> = {
  'I квартал': '1,2 млн ₽',
  'II квартал': '1,8 млн ₽',
  'III квартал': '2,4 млн ₽',
  'IV квартал': '3,1 млн ₽'
};

const quarters = Object.keys(revenue);
const quarter = ref('II квартал');
const group = ref<InstanceType<typeof CdsTagGroup> | null>(null);
</script>

<template>
  <div class="m-auto flex w-[420px] flex-col items-center gap-2">
    <div class="flex items-center gap-1">
      <CdsFunctionalButton icon="chevron-left" aria-label="Предыдущий квартал" @click="group?.prev()" />

      <CdsTagGroup ref="group" v-model="quarter" mandatory>
        <CdsTag v-for="item in quarters" :key="item" :value="item" :text="item" />
      </CdsTagGroup>

      <CdsFunctionalButton icon="chevron-right" aria-label="Следующий квартал" @click="group?.next()" />
    </div>

    <div class="flex w-full flex-col items-center rounded-200 bg-surface-secondary p-4">
      <span class="text-900">{{ revenue[quarter] }}</span>
      <span class="text-content-secondary">выручка за {{ quarter.toLowerCase() }}</span>
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
centerActive	boolean | undefined	—	Принудительно выравнивает активный компонент по центру.
color	string | undefined	—	Цвет компонента
column	boolean | undefined	—	Располагает теги в несколько строк с переносом вместо горизонтальной прокрутки.
contentClass	any	—	Добавляет классы к контейнеру slide group
contentStyle	any	—	Добавляет inline-стили к контейнеру slide group
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
filter	boolean | undefined	—	Показывает у выбранных тегов иконку-галочку (прокидывается в CdsTag).
mandatory	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
mobile	boolean | null | undefined	null	Определяет режим отображения компонента: Если значение равно true, компонент будет отображаться в режиме для Mobile. Если значение равно false, компонент будет отображаться в режиме для Desktop. Если значение равно null, режим будет зависеть от текущего Breakpoint.
mobileBreakpoint	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	—	Указывает точку преломления, при которой отображение будет переключаться в мобильный режим. Может быть числом (например, 600) или строкой, соответствующей одному из предопределенных Breakpoint (например, 'xs', 'sm', 'md', 'lg', 'xl').
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
nextIcon	IconValue | undefined	'chevron-right'	Иконка для кнопки "следующий".
prevIcon	IconValue | undefined	'chevron-left'	Иконка для кнопки "предыдущий".
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
scrollToActive	boolean | undefined	false	Если true, то при изменении активного компонента, контейнер будет прокручиваться так, чтобы он был виден.
selectedClass	string | undefined	'cds-tag--selected'	CSS класс для выбранного состояния
showArrows	string | boolean | undefined	—	Изменяет настройки отображения стрелок: По умолчанию стрелки всегда отображаются на Desktop устройствах при переполнении контейнера.<br /> При переполнении контейнера на мобильных устройствах стрелки по умолчанию не отображаются.<br /> Значение «true» для параметра «show-arrows» позволяет отображать эти стрелки на мобильных устройствах при переполнении контейнера.<br /> Значение «desktop» всегда отображает стрелки на настольных устройствах, а значение «mobile» — на мобильных устройствах.<br /> Значение «always» всегда отображает стрелки как на настольных, так и на мобильных устройствах.<br /> Используйте значение «never», чтобы отключить отображение стрелок.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента

События

Имя	Тип	Описание
update:modelValue	[value: unknown]	Срабатывает при изменении выбранного значения.

Слоты

Имя	Тип	Описание
default	CdsTagGroupSlotProps	Теги группы. В аргументах слота доступно состояние группы (выбор, навигация).

Exposed

Имя	Тип	Описание
isSelected	(id: string) => boolean	Проверить, выбран ли тег по id
next	() => void	Выбрать следующий тег
prev	() => void	Выбрать предыдущий тег
select	(id: string, value: boolean) => void	Выбрать тег по id
selected	readonly string[]	Идентификаторы выбранных тегов