В полях ввода описание уже встроено — проп description у CdsTextInput и других контролов. Отдельный CdsDescription нужен для групп полей и собственных контролов. Для подписи поля возьмите CdsLabel, для сообщений под полем — CdsMessages.

Вариации

Текст

Свойство text задаёт содержимое. Слот default добавляет к нему произвольную разметку — например, выделенный формат ввода.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDescription text="Укажите ИНН из 10 или 12 цифр" />

    <CdsDescription> Формат — <b>ДД.ММ.ГГГГ</b> </CdsDescription>
  </div>
</template>

Тег

По умолчанию описание рендерится тегом div. Свойство tag меняет тег — например на p, когда описание живёт в тексте страницы.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsDescription tag="p" text="Описание отрендерено тегом p" />
  </div>
</template>

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

Пояснение к группе полей

У группы чекбоксов нет своего description, поэтому метку и пояснение собирают вручную: CdsLabel называет группу, CdsDescription объясняет, что выбрать.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col gap-1 w-[350px] m-auto">
    <CdsLabel text="Уведомления" />
    <CdsDescription text="Выберите, куда присылать сообщения о новых заявках" />

    <CdsCheckbox v-model="channels" value="email" label="Электронная почта" multiple hide-details />
    <CdsCheckbox v-model="channels" value="sms" label="SMS" multiple hide-details />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
content	string | number | undefined	—	Контент, отображаемый в компоненте.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.

Слоты

Имя	Тип	Описание
default	any	Текст описания