В готовых полях блок сообщений уже встроен — пропсы messages, hint и error-messages у CdsTextInput и других контролов. Отдельный CdsMessages нужен для групп полей и собственных контролов. Для заметного уведомления на странице возьмите CdsNotification.

Вариации

Сообщения

Свойство messages принимает строку или массив строк — каждая строка станет отдельной, они не склеиваются.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsMessages active messages="Введите номер договора" />

    <CdsMessages active :messages="['Минимум 8 символов', 'Хотя бы одна цифра']" />
  </div>
</template>

Цвет

Свойство color задаёт цвет текста — берите статусные токены (status-danger-content для ошибки, status-success-content для подтверждения). Без цвета сообщения приглушены, как вспомогательный текст.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsMessages active messages="Обычное сообщение" />
    <CdsMessages active color="status-danger-content" messages="Номер договора не найден" />
    <CdsMessages active color="status-success-content" messages="Договор подтверждён" />
  </div>
</template>

Появление

Сообщения видны только при active. Появление и скрытие анимируются, анимацию задаёт проп transition.

Sandbox Storybook

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

const active = ref(true);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsMessages :active="active" messages="Сообщение появляется и исчезает с анимацией" />

    <CdsButton size="sm" variant="soft" color="brand" text="Показать / скрыть" @click="active = !active" />
  </div>
</template>

Слот

Слот message переопределяет отдельное сообщение и получает его текст — можно добавить иконку или ссылку. Слот default добавляет контент после всех сообщений.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsMessages active color="status-danger-content" :messages="['Файл больше 10 МБ', 'Формат не поддерживается']">
      <template #message="{ message }">
        <CdsIcon icon="error-fill" size="sm" start />
        {{ message }}
      </template>
    </CdsMessages>
  </div>
</template>

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

Ошибка группы полей

У группы чекбоксов нет собственной валидации: соберите её сами и покажите результат через active. Пока выбор пуст, красное сообщение висит под группой и исчезает с первым же чекбоксом.

Sandbox Storybook

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

const channels = ref<string[]>([]);
const isEmpty = computed(() => channels.value.length === 0);
</script>

<template>
  <div class="flex flex-col gap-1 w-[350px] m-auto">
    <CdsLabel text="Способы связи" />

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

    <CdsMessages :active="isEmpty" color="status-danger-content" messages="Выберите хотя бы один способ связи" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
textColor	string | undefined	—	Цвет текста компонента
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; leaveAbsolute: boolean; group: boolean; } | null | undefined	{ component: slide-transition-y, leaveAbsolute: true, group: true }	Анимация перехода

Слоты

Имя	Тип	Описание
default	any	Собственный вид всего списка сообщений вместо стандартного
message	CdsMessageSlot	Шаблон одного сообщения. В параметрах — текст сообщения