В готовых полях метка уже встроена — проп label у CdsTextInput и других контролов. Отдельный CdsLabel нужен для групп полей и собственных контролов. Пояснение под меткой добавляет CdsDescription.

Вариации

Текст

Свойство text задаёт подпись. Слот default принимает произвольную разметку — например, иконку с пояснением рядом с текстом.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsLabel text="Название организации" />

    <CdsLabel>
      Название организации
      <CdsIcon icon="info" size="sm" end />
    </CdsLabel>
  </div>
</template>

Состояния

Свойства disabled и readonly приглушают метку вслед за полем: обе перестают реагировать на клик, а disabled ещё и меняет цвет.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsLabel text="Обычная метка" />
    <CdsLabel text="Метка заблокированного поля" disabled />
    <CdsLabel text="Метка поля только для чтения" readonly />
  </div>
</template>

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

Подпись своего контрола

Свойство for принимает id контрола — браузер связывает их сам: клик по метке ставит фокус, а скринридер читает подпись вместе с полем.

Sandbox Storybook

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

const agreed = ref(false);
</script>

<template>
  <div class="flex items-center gap-1">
    <input id="agreement" v-model="agreed" type="checkbox" />

    <CdsLabel for="agreement" text="Согласен с условиями обработки данных" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
content	string | number | undefined	—	Контент, отображаемый в компоненте.
disabled	boolean | null | undefined	null	Заблокированное состояние
for	string | undefined	—	Идентификатор поля, к которому относится подпись — значение HTML-атрибута for
readonly	boolean | null | undefined	null	Только для чтения
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
text	string | number | undefined	—	Текст, отображаемый в компоненте.

Слоты

Имя	Тип	Описание
default	any	Текст подписи к полю