Inputs already have the description built in — the description prop of CdsTextInput and the other controls. A standalone CdsDescription is needed for groups of fields and for your own controls. For the label of a field take CdsLabel, for the messages under a field take CdsMessages.

Variations

Text

The text prop sets the content. The default slot adds arbitrary markup to it — a highlighted input format, for example.

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>

Tag

By default the description renders as a div tag. The tag prop changes the tag — to p, for example, when the description lives inside the text of the page.

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>

Scenarios

An explanation for a group of fields

A group of checkboxes has no description of its own, so the label and the explanation are assembled by hand: CdsLabel names the group, CdsDescription explains what to pick.

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

Props

Name	Type	Default	Description
content	string | number | undefined	—	Content displayed in the component.
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
text	string | number | undefined	—	Text displayed in the component.

Slots

Name	Type	Description
default	any	Text of the description