The ready-made fields already have the counter built in — turn on the counter prop of CdsTextInput or CdsTextArea. A standalone CdsCounter is needed when you build your own control.

Variations

Value and maximum

The value prop sets the current number, max sets the limit. Without max the counter shows a single number, with max it shows a fraction. As soon as value is greater than max, the text turns red.

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>

Appearance

The counter is visible only with active — by default it is hidden. Showing and hiding are animated, and the animation is set by the transition prop.

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>

Slot

The default slot replaces the text of the counter and receives value, max and the ready counter string.

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>

Scenarios

Character limit of a field

The details slot of an input is the place for a counter next to the messages. Count the length of the value yourself and pass it into value: when the text outgrows the limit, the counter turns red.

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

Props

Name	Type	Default	Description
active	boolean | undefined	—	Active state
disabled	boolean | null | undefined	null	Disabled state
max	string | number | undefined	—	Maximum value
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; } | null | undefined	{ component: slide-transition-y }	Transition animation
value	string | number | undefined	0	Value of the counter

Slots

Name	Type	Description
default	CdsCounterSlot	Your own look for the counter. The slot props carry the ready counter string, the current and the maximum number of characters