Для готовой группы с заголовком, описанием и сообщениями берите CdsRadioGroup: она собрана из этой группы и обвязки CdsInput. CdsSelectionControlGroup нужен, когда вы строите свой набор контролов.

Вариации

Общая модель и тип

Значение выбранного контрола хранит группа: v-model — на ней, у каждого вложенного контрола только своё value. Свойства type, true-icon и false-icon группа раздаёт всем контролам, а общий атрибут name для нативных input создаёт сама — переопределить его можно свойством name.

Sandbox Storybook

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

const delivery = ref('courier');
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-2">
    <CdsSelectionControlGroup v-model="delivery" type="radio" true-icon="radio-on" false-icon="radio-off">
      <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
      <CdsSelectionControl value="pickup" label="Самовывоз" class="gap-x-2" />
      <CdsSelectionControl value="post" label="Почтой" class="gap-x-2" />
    </CdsSelectionControlGroup>

    <span class="text-content-secondary">Значение модели: {{ delivery }}</span>
  </div>
</template>

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

Массив в модели включает режим multiple: каждый контрол добавляет в неё своё value. Режим включается автоматически — свойство multiple нужно, только чтобы задать его вручную.

Sandbox Storybook

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

const channels = ref(['email']);
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-2">
    <CdsSelectionControlGroup
      v-model="channels"
      type="checkbox"
      true-icon="checkbox-on"
      false-icon="checkbox-off"
      direction="vertical"
    >
      <CdsSelectionControl value="email" label="Почта" class="gap-x-2" />
      <CdsSelectionControl value="sms" label="SMS" class="gap-x-2" />
      <CdsSelectionControl value="push" label="Push-уведомления" class="gap-x-2" />
    </CdsSelectionControlGroup>

    <span class="text-content-secondary">Значение модели: {{ channels }}</span>
  </div>
</template>

Направление

По умолчанию контролы выстраиваются в ряд и делят ширину группы поровну. direction="vertical" ставит их в столбец — так удобнее длинным подписям и наборам с описаниями.

Sandbox Storybook

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

const horizontal = ref('year');
const vertical = ref('year');
</script>

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

      <CdsSelectionControlGroup v-model="horizontal" type="radio" true-icon="radio-on" false-icon="radio-off">
        <CdsSelectionControl value="year" label="Год" class="gap-x-2" />
        <CdsSelectionControl value="quarter" label="Квартал" class="gap-x-2" />
        <CdsSelectionControl value="month" label="Месяц" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">Вертикально</span>

      <CdsSelectionControlGroup
        v-model="vertical"
        direction="vertical"
        type="radio"
        true-icon="radio-on"
        false-icon="radio-off"
      >
        <CdsSelectionControl value="year" label="Год" class="gap-x-2" />
        <CdsSelectionControl value="quarter" label="Квартал" class="gap-x-2" />
        <CdsSelectionControl value="month" label="Месяц" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>
  </div>
</template>

Состояния

disabled блокирует всю группу, readonly запрещает менять выбор, не меняя внешний вид, error переводит все контролы в состояние ошибки. Отдельный вариант блокируется свойством disabled самого контрола.

Sandbox Storybook

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

const disabled = ref('courier');
const readonly = ref('courier');
const partly = ref('courier');
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">disabled — заблокирована вся группа</span>

      <CdsSelectionControlGroup
        v-model="disabled"
        disabled
        type="radio"
        color="green"
        true-icon="radio-on"
        false-icon="radio-off"
      >
        <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
        <CdsSelectionControl value="pickup" label="Самовывоз" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">readonly — вид прежний, выбор не меняется</span>

      <CdsSelectionControlGroup
        v-model="readonly"
        readonly
        type="radio"
        color="green"
        true-icon="radio-on"
        false-icon="radio-off"
      >
        <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
        <CdsSelectionControl value="pickup" label="Самовывоз" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">Отдельный контрол блокируется своим disabled</span>

      <CdsSelectionControlGroup v-model="partly" type="radio" color="green" true-icon="radio-on" false-icon="radio-off">
        <CdsSelectionControl value="courier" label="Курьером" class="gap-x-2" />
        <CdsSelectionControl value="pickup" disabled label="Самовывоз" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>
  </div>
</template>

Цвета и иконки

color задаёт цвет выбранного контрола, base-color — невыбранных, true-icon и false-icon — пару иконок состояний. Значения применяются сразу ко всем контролам группы.

Sandbox Storybook

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

const plan = ref('pro');
const favorites = ref(['first']);
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">color — выбранный, base-color — остальные</span>

      <CdsSelectionControlGroup
        v-model="plan"
        type="radio"
        color="green"
        base-color="purple"
        true-icon="radio-on"
        false-icon="radio-off"
      >
        <CdsSelectionControl value="base" label="Базовый" class="gap-x-2" />
        <CdsSelectionControl value="pro" label="Профи" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">Своя пара иконок для всей группы</span>

      <CdsSelectionControlGroup v-model="favorites" type="checkbox" true-icon="star-fill" false-icon="star">
        <CdsSelectionControl value="first" label="Первый" class="gap-x-2" />
        <CdsSelectionControl value="second" label="Второй" class="gap-x-2" />
      </CdsSelectionControlGroup>
    </div>
  </div>
</template>

Пробрасывание настроек

Свои настройки группа отдаёт компоненту, имя которого указано в defaults-target — по умолчанию это CdsSelectionControl. Поставьте туда имя готового контрола, и группа станет управлять им: так CdsRadioGroup раздаёт настройки радиокнопкам.

Sandbox Storybook

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

const categories = ref(['office']);
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-2">
    <CdsSelectionControlGroup v-model="categories" defaults-target="CdsCheckbox" type="checkbox" direction="vertical">
      <CdsCheckbox value="office" label="Канцелярия" hide-details />
      <CdsCheckbox value="furniture" label="Мебель" hide-details />
      <CdsCheckbox value="tech" label="Техника" hide-details />
    </CdsSelectionControlGroup>

    <span class="text-content-secondary">Значение модели: {{ categories }}</span>
  </div>
</template>

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

Фильтр по категориям

Модель-массив собирает отмеченные категории, а список пересобирается на лету через computed. inline оставляет контролам ширину подписи, поэтому фильтры идут плотным рядом.

Sandbox Storybook

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

const categories = [
  { value: 'office', label: 'Канцелярия' },
  { value: 'furniture', label: 'Мебель' },
  { value: 'tech', label: 'Техника' }
];

const products = [
  { title: 'Бумага А4', category: 'office' },
  { title: 'Кресло офисное', category: 'furniture' },
  { title: 'Монитор 27"', category: 'tech' },
  { title: 'Стеллаж', category: 'furniture' }
];

const selected = ref<string[]>([]);

const items = computed(() =>
  products
    .filter((product) => !selected.value.length || selected.value.includes(product.category))
    .map((product) => ({ title: product.title }))
);
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-2">
    <CdsSelectionControlGroup
      v-model="selected"
      type="checkbox"
      true-icon="checkbox-on"
      false-icon="checkbox-off"
      class="gap-3"
    >
      <CdsSelectionControl
        v-for="category of categories"
        :key="category.value"
        inline
        :value="category.value"
        :label="category.label"
        class="gap-x-2"
      />
    </CdsSelectionControlGroup>

    <CdsList :items="items" />
  </div>
</template>

Плитки выбора

Группа не диктует контролам разметку: в слоте input каждый рисует свою плитку, а группа по-прежнему хранит выбранное значение и связывает нативные input одним name.

Sandbox Storybook

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

const slots = [
  { value: 'morning', title: 'Утро', time: '9:00 — 12:00' },
  { value: 'day', title: 'День', time: '12:00 — 17:00' },
  { value: 'evening', title: 'Вечер', time: '17:00 — 21:00' }
];

const slot = ref('day');
</script>

<template>
  <CdsSelectionControlGroup v-model="slot" type="radio" class="justify-center gap-2">
    <CdsSelectionControl
      v-for="item of slots"
      :key="item.value"
      inline
      :value="item.value"
      :aria-label="`${item.title}, ${item.time}`"
      :style="{ '--cds-selection-control-width': '140px', '--cds-selection-control-height': '64px' }"
    >
      <template #input="{ inputNode, model }">
        <component :is="inputNode" />

        <div
          class="flex h-full w-full flex-col justify-center rounded-200 border px-3"
          :class="model.value ? 'border-line-selected ring-1 ring-line-selected' : 'border-line-primary'"
        >
          <span>{{ item.title }}</span>
          <span class="text-content-secondary">{{ item.time }}</span>
        </div>
      </template>
    </CdsSelectionControl>
  </CdsSelectionControlGroup>
</template>

API

Пропсы, события и слоты отдельного контрола — на странице CdsSelectionControl.

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
defaultsTarget	string | undefined	—	Имя дочернего компонента, которому пробрасываются значения пропсов группы по умолчанию
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Переводит компонент в визуальное состояние ошибки
falseIcon	IconValue | undefined	—	Иконка невыбранного состояния
id	string | undefined	—	Уникальный идентификатор компонента
inline	boolean | undefined	—	Отображает контрол как inline-элемент — контейнер не растягивается на всю ширину
modelValue	any	—	Значение компонента (v-model). В группе — значение выбранного контрола, при multiple — массив выбранных значений
multiple	boolean | null | undefined	null	Разрешает выбор нескольких значений — модель становится массивом. Включается автоматически, если в modelValue передан массив
name	string | undefined	—	Атрибут name нативного элемента input. В группе одно имя объединяет все вложенные контролы
readonly	boolean | null | undefined	null	Только для чтения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
trueIcon	IconValue | undefined	—	Иконка выбранного состояния
type	string | undefined	—	Тип нативного элемента input — например, radio или checkbox
valueComparator	ValueComparator | undefined	true	Функция сравнения значения модели со значением value контрола. По умолчанию — глубокое сравнение

События

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

Слоты

Имя	Тип	Описание
default	any	Элементы управления группы — чекбоксы или радиокнопки