For independent options that are turned on separately use CdsCheckbox, for an on/off setting that applies immediately — CdsToggle. If there are more than five options, fold the list into CdsSelect.

Anatomy

The heading and the description caption the whole set, below them are the radio buttons: each one has a control with a state icon, a label and an optional description. At the bottom is the common messages block of the group. A click on the label selects the button exactly like a click on the control.

Storybook

Variations

Heading and description

The label prop names the group, description explains the choice. Every button has its own label and description: name the option briefly in the label and move the details — the price, the deadlines, the limits — into the 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

By default the buttons are stacked in a column. direction="horizontal" puts them in a row — handy for short sets of two or three options such as a period or a sort order.

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>

States

disabled blocks the whole group and lowers the contrast, readonly forbids changing the choice but does not change the appearance. A single option is blocked by the disabled prop of the button itself.

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 and errors

messages shows a supporting text under the group, error-messages — a ready error message (the one coming from the server, for example) together with the error state on all the buttons. Validation rules through rules are in the "Submitting a form" scenario. hide-details removes the bottom block entirely.

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>

Colors

color sets the color of the selected button, base-color — of the unselected ones. The values apply to all the buttons of the group at once.

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>

Slots

When the text props are not enough, the content of the blocks is replaced by slots — both on the group and on every button.

Slot name	Description
label	Content of the group heading (replaces label)
description	Content of the group description (replaces description)
prepend	Element before the set of buttons
append	Element after the set of buttons
messages	Content of the messages block
details	The whole bottom block

CdsRadio has its own label and description slots — to highlight a part of the text or add an icon, for example.

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>

Guidelines

Storybook

Scenarios

Submitting a form

The choice is required: a rule in rules returns the error text while no value is selected. The button starts the check through the validate() of the 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>

Choosing a plan

The descriptions of the buttons state the conditions, and the computed total under the group is updated on every choice — the user sees the consequences right away.

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>

Sorting a list

A horizontal group with hide-details works as a sorting panel: the selected value rebuilds the list on the fly through a 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

The props, events and slots of a single button are on the CdsRadio page.

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
appendIcon	IconValue | undefined	—	Icon in the append slot, after the content
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
centerAffix	boolean | undefined	true	Vertically center the appendInner, prependInner, clearIcon and label elements.
color	string | undefined	—	Component color
defaultsTarget	string | undefined	—	Name of the child component the group prop values are passed to as defaults
description	string | undefined	—	Description of the component, shown under the label
direction	"horizontal" | "vertical" | undefined	'vertical'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
error	boolean | undefined	—	Puts the component into the visual error state
errorMessages	string | readonly string[] | null | undefined	[]	Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the rules prop. This field does not trigger validation.
falseIcon	IconValue | undefined	'radio-off'	Icon of an unselected radio button
focused	boolean | undefined	—	Controls the focus state of the component. When true, the component is considered focused and may apply the corresponding styles or behavior.
height	string | number | undefined	'auto'	Height of the component
hideDetails	boolean | "auto" | undefined	—	Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages
hideMessages	boolean | undefined	—	Hide the messages under the input
hint	string | undefined	—	Hint text shown under the input
iconColor	string | boolean | undefined	—	Icon color. Accepts a boolean or a color string
id	string | undefined	—	Unique identifier of the component
inline	boolean | undefined	—	Renders the control as an inline element — the container does not stretch to the full width
label	string | undefined	—	Label text of the component
maxErrors	string | number | undefined	1	Maximum number of validation errors shown
maxWidth	string | number | undefined	—	Maximum component width
messages	string | readonly string[] | undefined	[]	Messages shown under the input
minWidth	string | number | undefined	—	Minimum component width
modelValue	any	—	Value of the component (v-model). In a group it is the value of the selected control, with multiple — an array of the selected values
name	string | undefined	—	The name attribute of the native input element. In a group one name joins all the nested controls
persistentHint	boolean | undefined	—	Always show the hint, not only on focus
prependIcon	IconValue | undefined	—	Icon in the prepend slot, before the content
readonly	boolean | null | undefined	null	Read-only state
rules	readonly ValidationRule[] | undefined	[]	Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
trueIcon	IconValue | undefined	'radio-on'	Icon of a selected radio button
type	string | undefined	'radio'	Type of the native input element of the group buttons
validateOn	ValidateOn | undefined	—	Changes the type of the event that triggers validation
validationValue	any	—	Value used when applying the validation rules
valueComparator	ValueComparator | undefined	true	Function comparing the model value with the value of the control. Deep comparison by default
width	string | number | undefined	—	Component width

Events

Name	Type	Description
update:modelValue	[value: any]	Fires when the model of the component changes

Slots

Name	Type	Description
append	CdsInputSlot	Adds an element after the input
default	any	Default slot — the radio buttons of the group (CdsRadio)
description	{ description: string | undefined; props: Record<string, any>; }	Default slot of the CdsDescription component
details	CdsInputSlot	Slot for custom content that lets you customize how the messages are displayed
label	{ label: string | undefined; props: Record<string, any>; }	Default slot of the CdsLabel component
message	CdsMessageSlot	Slot for customizing the content of a message
messages	CdsInputSlot	Slot for custom content that lets you customize how the messages are displayed
prepend	CdsInputSlot	Adds an element before the input

Exposed

Name	Type	Description
isDirty	boolean	Whether the input is dirty
isDisabled	boolean	Whether the input is disabled
isPure	boolean	Whether the input is pure
isReadonly	boolean	Whether the input is read-only
isValid	boolean | null	Whether the input is valid
isValidating	boolean	Whether the input is being validated
reset	() => Promise<void>	Resets the input to its initial state
resetValidation	() => Promise<void>	Resets the validation of the input
validate	(silent?: boolean) => Promise<string[]>	Validates the input