The ready-made fields already have the block of messages built in — the messages, hint and error-messages props of CdsTextInput and the other controls. A standalone CdsMessages is needed for groups of fields and for your own controls. For a noticeable notification on the page take CdsNotification.

Variations

Messages

The messages prop accepts a string or an array of strings — every string becomes a separate line, they are not glued together.

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

The color prop sets the color of the text — take the status tokens (status-danger-content for an error, status-success-content for a confirmation). Without a color the messages are muted, like supporting text.

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>

Appearance

The messages are visible only with active. Showing and hiding are animated, and the animation is set by the transition prop.

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>

Slot

The message slot overrides a single message and receives its text — you can add an icon or a link. The default slot adds content after all the messages.

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>

Scenarios

An error for a group of fields

A group of checkboxes has no validation of its own: assemble it yourself and show the result through active. While the selection is empty, the red message hangs under the group and disappears with the very first checkbox.

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

Props

Name	Type	Default	Description
active	boolean | undefined	—	Active state
activeColor	string | undefined	—	Color of the component in its active state
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
color	string | undefined	—	Component color
hideMessages	boolean | undefined	—	Hide the messages under the input
messages	string | readonly string[] | undefined	[]	Messages shown under the input
textColor	string | undefined	—	Text color of the component
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; leaveAbsolute: boolean; group: boolean; } | null | undefined	{ component: slide-transition-y, leaveAbsolute: true, group: true }	Transition animation

Slots

Name	Type	Description
default	any	Your own look for the whole list of messages instead of the default one
message	CdsMessageSlot	Template for a single message. The slot props carry the text of the message