В готовых полях счётчик уже встроен — включите проп counter у CdsTextInput или CdsTextArea. Отдельный CdsCounter нужен, когда вы собираете свой контрол.

Вариации

Значение и максимум

Свойство value задаёт текущее число, max — предел. Без max счётчик показывает одно число, с max — дробь. Как только value больше max, текст становится красным.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsCounter active value="42" />
    <CdsCounter active value="42" max="100" />
    <CdsCounter active value="120" max="100" />
  </div>
</template>

Появление

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

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsCounter :active="active" value="42" max="100" />

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

Слот

Слот default заменяет текст счётчика и получает value, max и готовую строку counter.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsCounter v-slot="{ value, max }" active value="42" max="100">
      Осталось {{ Number(max) - Number(value) }} символов
    </CdsCounter>
  </div>
</template>

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

Лимит символов у поля

Слот details у поля ввода — место для счётчика рядом с сообщениями. Длину значения считайте сами и передавайте в value: когда текст перерастёт лимит, счётчик покраснеет.

Sandbox Storybook

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

const max = 40;
const title = ref('Поставка канцелярских товаров');
</script>

<template>
  <CdsTextInput v-model="title" label="Название закупки" placeholder="Введите название" class="w-[350px] m-auto">
    <template #details>
      <CdsCounter active :value="title.length" :max="max" />
    </template>
  </CdsTextInput>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние
disabled	boolean | null | undefined	null	Заблокированное состояние
max	string | number | undefined	—	Максимальное значение
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; } | null | undefined	{ component: slide-transition-y }	Анимация перехода
value	string | number | undefined	0	Значение счетчика

Слоты

Имя	Тип	Описание
default	CdsCounterSlot	Собственный вид счётчика. В параметрах — готовая строка счётчика, текущее и максимальное количество символов