The ready-made fields already have the label built in — the label prop of CdsTextInput and the other controls. A standalone CdsLabel is needed for groups of fields and for your own controls. The explanation under the label is added by CdsDescription.

Variations

Text

The text prop sets the caption. The default slot accepts arbitrary markup — an icon with an explanation next to the text, for example.

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>

States

The disabled and readonly props mute the label together with the field: both stop reacting to a click, and disabled also changes the color.

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>

Scenarios

A label for your own control

The for prop takes the id of the control — the browser binds them itself: a click on the label sets the focus, and the screen reader reads the caption together with the field.

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

Props

Name	Type	Default	Description
content	string | number | undefined	—	Content displayed in the component.
disabled	boolean | null | undefined	null	Disabled state
for	string | undefined	—	Identifier of the field the label belongs to — the value of the for HTML attribute
readonly	boolean | null | undefined	null	Read-only state
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
text	string | number | undefined	—	Text displayed in the component.

Slots

Name	Type	Description
default	any	Text of the label for the field