Для независимых опций, которые включаются по отдельности, — CdsCheckbox, для настройки «вкл/выкл», применяемой сразу, — CdsToggle. Если вариантов больше пяти, сверните список в CdsSelect.

Анатомия

Заголовок и описание подписывают весь набор, ниже — радиокнопки: у каждой контрол с иконкой состояния, лейбл и необязательное описание. Внизу — общий блок сообщений группы. Клик по лейблу выбирает кнопку так же, как клик по контролу.

Storybook

Вариации

Заголовок и описание

Свойство label называет группу, description поясняет выбор. У каждой кнопки свои label и description: коротко назовите вариант в лейбле, а детали — цену, сроки, ограничения — уберите в описание.

Sandbox Storybook

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

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

<template>
  <div class="w-[350px] m-auto">
    <CdsRadioGroup v-model="delivery" label="Способ получения" description="Изменить способ можно до отправки заказа">
      <CdsRadio value="pickup" label="Самовывоз" description="Бесплатно, завтра из пункта выдачи" />
      <CdsRadio value="courier" label="Курьер" description="Завтра с 10:00 до 18:00, 300 ₽" />
      <CdsRadio value="post" label="Почта" description="5–7 дней, 250 ₽" />
    </CdsRadioGroup>
  </div>
</template>

Направление

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

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col gap-6 w-[350px] m-auto">
    <CdsRadioGroup v-model="vertical" label="Вертикально — по умолчанию" hide-details>
      <CdsRadio value="year" label="Год" />
      <CdsRadio value="quarter" label="Квартал" />
      <CdsRadio value="month" label="Месяц" />
    </CdsRadioGroup>

    <CdsRadioGroup v-model="horizontal" label="Горизонтально" direction="horizontal" hide-details>
      <CdsRadio value="year" label="Год" />
      <CdsRadio value="quarter" label="Квартал" />
      <CdsRadio value="month" label="Месяц" />
    </CdsRadioGroup>
  </div>
</template>

Состояния

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

Sandbox Storybook

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

const payment = ref('card');
</script>

<template>
  <div class="flex flex-col gap-6 w-[350px] m-auto">
    <CdsRadioGroup model-value="card" label="Disabled" disabled hide-details>
      <CdsRadio value="card" label="Картой онлайн" />
      <CdsRadio value="invoice" label="По счёту" />
    </CdsRadioGroup>

    <CdsRadioGroup model-value="card" label="Readonly" readonly hide-details>
      <CdsRadio value="card" label="Картой онлайн" />
      <CdsRadio value="invoice" label="По счёту" />
    </CdsRadioGroup>

    <CdsRadioGroup v-model="payment" label="Заблокирована одна кнопка" hide-details>
      <CdsRadio value="card" label="Картой онлайн" />
      <CdsRadio value="invoice" label="По счёту" />
      <CdsRadio value="cash" label="Наличными при получении" disabled />
    </CdsRadioGroup>
  </div>
</template>

Сообщения и ошибки

messages показывает вспомогательный текст под группой, error-messages — готовое сообщение об ошибке (например, пришедшее с сервера) вместе с состоянием ошибки у всех кнопок. Правила валидации через rules — в сценарии «Отправка формы». hide-details убирает нижний блок целиком.

Sandbox Storybook

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

const format = ref('pdf');
</script>

<template>
  <div class="flex flex-col gap-6 w-[350px] m-auto">
    <CdsRadioGroup v-model="format" label="Формат выгрузки" messages="Файл придёт на почту после формирования">
      <CdsRadio value="pdf" label="PDF" />
      <CdsRadio value="xlsx" label="Excel" />
    </CdsRadioGroup>

    <CdsRadioGroup label="Способ оплаты" error-messages="Выберите способ оплаты">
      <CdsRadio value="card" label="Картой онлайн" />
      <CdsRadio value="invoice" label="По счёту" />
    </CdsRadioGroup>
  </div>
</template>

Цвета

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

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-6 w-[350px] m-auto">
    <CdsRadioGroup model-value="first" color="green" label="Зелёный при выборе (color)" hide-details>
      <CdsRadio value="first" label="Выбранный вариант" />
      <CdsRadio value="second" label="Невыбранный вариант" />
    </CdsRadioGroup>

    <CdsRadioGroup base-color="purple" label="Фиолетовый до выбора (base-color)" hide-details>
      <CdsRadio value="first" label="Первый вариант" />
      <CdsRadio value="second" label="Второй вариант" />
    </CdsRadioGroup>
  </div>
</template>

Слоты

Когда текстовых пропсов недостаточно, содержимое блоков заменяется слотами — у группы и у каждой кнопки.

Имя слота	Описание
label	Содержимое заголовка группы (замещает label)
description	Содержимое описания группы (замещает description)
prepend	Элемент до набора кнопок
append	Элемент после набора кнопок
messages	Содержимое блока сообщений
details	Нижний блок целиком

У CdsRadio есть свои слоты label и description — например, чтобы подсветить часть текста или добавить иконку.

Sandbox Storybook

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

const channel = ref('email');
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsRadioGroup v-model="channel">
      <template #label>
        <div>Уведомления о <span class="text-status-success-content font-bold">новых заказах</span></div>
      </template>
      <template #description>
        <div>Канал можно поменять в настройках <cds-icon name="settings" /></div>
      </template>
      <CdsRadio value="email">
        <template #label>Электронная почта</template>
      </CdsRadio>
      <CdsRadio value="telegram">
        <template #label>Telegram</template>
        <template #description>Сообщения приходят мгновенно</template>
      </CdsRadio>
    </CdsRadioGroup>
  </div>
</template>

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

Storybook

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

Отправка формы

Выбор обязателен: правило в rules возвращает текст ошибки, пока значение не выбрано. Кнопка запускает проверку через validate() формы CdsForm.

Sandbox Storybook

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

const payment = ref<string | null>(null);
const sending = ref(false);
const formRef = ref<InstanceType<typeof CdsForm>>();

const rules = [(value: string | null) => !!value || 'Выберите способ оплаты'];

async function submit() {
  const form = unref(formRef);
  if (!form) return;

  const { valid } = await form.validate();
  if (!valid) return;

  sending.value = true;
  setTimeout(() => {
    sending.value = false;
  }, 1500);
}
</script>

<template>
  <CdsForm ref="formRef" class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsRadioGroup v-model="payment" :rules="rules" label="Способ оплаты">
      <CdsRadio value="card" label="Картой онлайн" />
      <CdsRadio value="invoice" label="По счёту" description="Для юридических лиц" />
      <CdsRadio value="cash" label="Наличными при получении" />
    </CdsRadioGroup>

    <CdsButton text="Оформить заказ" :loading="sending" @click="submit" />
  </CdsForm>
</template>

Выбор тарифа

Описания кнопок подсказывают условия, а вычисляемый итог под группой обновляется при каждом выборе — пользователь видит последствия сразу.

Sandbox Storybook

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

const tariffs = [
  { value: 'start', label: 'Старт', description: '5 пользователей и базовые отчёты', price: 0 },
  { value: 'business', label: 'Бизнес', description: '50 пользователей, отчёты и интеграции', price: 4900 },
  { value: 'corp', label: 'Корпорация', description: 'Без ограничений, персональный менеджер', price: 19900 }
];

const selected = ref('business');

const total = computed(() => {
  const tariff = tariffs.find((item) => item.value === selected.value);
  return tariff && tariff.price > 0 ? `${tariff.price.toLocaleString('ru-RU')} ₽/мес` : 'бесплатно';
});
</script>

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsRadioGroup v-model="selected" label="Тариф" hide-details>
      <CdsRadio
        v-for="tariff in tariffs"
        :key="tariff.value"
        :value="tariff.value"
        :label="tariff.label"
        :description="tariff.description"
      />
    </CdsRadioGroup>

    <div>
      Итого: <span class="font-bold">{{ total }}</span>
    </div>
  </div>
</template>

Сортировка списка

Горизонтальная группа с hide-details работает как панель сортировки: выбранное значение пересобирает список на лету через computed.

Sandbox Storybook

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

const products = [
  { name: 'Монитор', price: 25400, added: '2026-05-14' },
  { name: 'Ноутбук', price: 82000, added: '2026-07-02' },
  { name: 'Клавиатура', price: 4300, added: '2026-06-20' },
  { name: 'Док-станция', price: 11900, added: '2026-04-08' }
];

const sort = ref('new');

const items = computed(() =>
  [...products]
    .sort((a, b) => {
      if (sort.value === 'cheap') return a.price - b.price;
      if (sort.value === 'name') return a.name.localeCompare(b.name);
      return b.added.localeCompare(a.added);
    })
    .map((product) => ({ title: `${product.name} — ${product.price.toLocaleString('ru-RU')} ₽` }))
);
</script>

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsRadioGroup v-model="sort" label="Сортировка" direction="horizontal" hide-details>
      <CdsRadio value="new" label="Сначала новые" />
      <CdsRadio value="cheap" label="Дешевле" />
      <CdsRadio value="name" label="По алфавиту" />
    </CdsRadioGroup>

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

API

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

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
centerAffix	boolean | undefined	true	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
color	string | undefined	—	Цвет компонента
defaultsTarget	string | undefined	—	Имя дочернего компонента, которому пробрасываются значения пропсов группы по умолчанию
description	string | undefined	—	Описание компонента, отображаемое под меткой
direction	"horizontal" | "vertical" | undefined	'vertical'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Переводит компонент в визуальное состояние ошибки
errorMessages	string | readonly string[] | null | undefined	[]	Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках. Будет объединяться с любыми проверками, заданными в свойстве rules. Это поле не запускает валидацию.
falseIcon	IconValue | undefined	'radio-off'	Иконка невыбранной радиокнопки
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
height	string | number | undefined	'auto'	Высота компонента
hideDetails	boolean | "auto" | undefined	—	Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
hint	string | undefined	—	Текст подсказки, отображаемый под полем ввода
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Уникальный идентификатор компонента
inline	boolean | undefined	—	Отображает контрол как inline-элемент — контейнер не растягивается на всю ширину
label	string | undefined	—	Текст метки (label) компонента
maxErrors	string | number | undefined	1	Максимальное число отображаемых ошибок при валидации
maxWidth	string | number | undefined	—	Максимальная ширина компонента
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	any	—	Значение компонента (v-model). В группе — значение выбранного контрола, при multiple — массив выбранных значений
name	string | undefined	—	Атрибут name нативного элемента input. В группе одно имя объединяет все вложенные контролы
persistentHint	boolean | undefined	—	Всегда отображать подсказку, а не только при фокусе
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
readonly	boolean | null | undefined	null	Только для чтения
rules	readonly ValidationRule[] | undefined	[]	Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк. Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке. Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
trueIcon	IconValue | undefined	'radio-on'	Иконка выбранной радиокнопки
type	string | undefined	'radio'	Тип нативного элемента input у кнопок группы
validateOn	ValidateOn | undefined	—	Изменяет тип события, при котором запускается валидация
validationValue	any	—	Значение, используемое при применении правил валидации
valueComparator	ValueComparator | undefined	true	Функция сравнения значения модели со значением value контрола. По умолчанию — глубокое сравнение
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
update:modelValue	[value: any]	Событие, которое срабатывает при изменении модели компонента

Слоты

Имя	Тип	Описание
append	CdsInputSlot	Добавляет элемент после поля ввода
default	any	Слот по умолчанию — радиокнопки группы (CdsRadio)
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
details	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel
message	CdsMessageSlot	Слот для настройки содержания сообщения
messages	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
prepend	CdsInputSlot	Добавляет элемент до поля ввода

Exposed

Имя	Тип	Описание
isDirty	boolean	Является ли поле ввода "грязным"
isDisabled	boolean	Является ли поле ввода заблокированным
isPure	boolean	Является ли поле ввода "чистым"
isReadonly	boolean	Является ли поле ввода только для чтения
isValid	boolean | null	Является ли поле ввода валидным
isValidating	boolean	Является ли поле ввода в процессе валидации
reset	() => Promise<void>	Функция сброса поля ввода в исходное состояние
resetValidation	() => Promise<void>	Функция сброса валидации поля ввода
validate	(silent?: boolean) => Promise<string[]>	Функция валидации поля ввода