Для обычного ввода берите готовые поля — CdsTextInput, CdsSelect, CdsTextArea. CdsField нужен, когда своего контрола нет в библиотеке. Метку, описание и сообщения вокруг рамки добавляет CdsInput.

Анатомия

Слот default получает объект props — навесьте его на свой контрол, чтобы поле получило id, класс и связь с сообщениями. Вокруг контрола CdsField раскладывает внутренние иконки и кнопку очистки.

Storybook

Вариации

Иконки

Свойства prepend-inner-icon и append-inner-icon ставят иконку внутрь рамки — до и после контрола. Те же зоны доступны как слоты prepend-inner и append-inner, если нужна кнопка, а не иконка.

Sandbox Storybook

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

const query = ref('');
</script>

<template>
  <div class="w-[320px] m-auto">
    <CdsField
      v-slot="{ props: fieldProps, focus, blur }"
      prepend-inner-icon="search"
      append-inner-icon="settings"
      :dirty="!!query"
    >
      <input v-bind="fieldProps" v-model="query" placeholder="Поиск по заявкам" @focus="focus" @blur="blur" />
    </CdsField>
  </div>
</template>

Очистка

Свойство clearable добавляет крестик; он показывается, когда поле помечено dirty, и появляется при наведении или фокусе. Свойство persistent-clearable держит крестик видимым всегда. Значение сбрасывает не компонент, а вы — в обработчике @click:clear.

Sandbox Storybook

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

const onHover = ref('Видна при наведении');
const persistent = ref('Видна всегда');
</script>

<template>
  <div class="flex flex-col gap-2 w-[320px] m-auto">
    <CdsField v-slot="{ props: fieldProps, focus, blur }" clearable :dirty="!!onHover" @click:clear="onHover = ''">
      <input v-bind="fieldProps" v-model="onHover" @focus="focus" @blur="blur" />
    </CdsField>

    <CdsField
      v-slot="{ props: fieldProps, focus, blur }"
      clearable
      persistent-clearable
      :dirty="!!persistent"
      @click:clear="persistent = ''"
    >
      <input v-bind="fieldProps" v-model="persistent" @focus="focus" @blur="blur" />
    </CdsField>
  </div>
</template>

Состояния

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

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-2 w-[320px] m-auto">
    <CdsField v-slot="{ props: fieldProps }">
      <input v-bind="fieldProps" value="Обычное поле" readonly />
    </CdsField>

    <CdsField v-slot="{ props: fieldProps }" disabled>
      <input v-bind="fieldProps" value="Заблокировано" disabled />
    </CdsField>

    <CdsField v-slot="{ props: fieldProps }" readonly>
      <input v-bind="fieldProps" value="Только для чтения" readonly />
    </CdsField>

    <CdsField v-slot="{ props: fieldProps }" error>
      <input v-bind="fieldProps" value="Ошибка" readonly />
    </CdsField>
  </div>
</template>

Загрузка

Свойство loading показывает полосу под полем. Значение circle заменяет её круговым индикатором внутри рамки — так удобнее, когда поле ждёт ответа сервера при вводе.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-3 w-[320px] m-auto">
    <CdsField v-slot="{ props: fieldProps }" loading>
      <input v-bind="fieldProps" value="Полоса под полем" readonly />
    </CdsField>

    <CdsField v-slot="{ props: fieldProps }" loading="circle">
      <input v-bind="fieldProps" value="Индикатор внутри поля" readonly />
    </CdsField>
  </div>
</template>

Размеры

Свойство size меняет высоту рамки и внутренние отступы. Размер по умолчанию — md.

Sandbox Storybook

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

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
</script>

<template>
  <div class="flex flex-col gap-2 w-[320px] m-auto">
    <CdsField v-for="size of sizes" :key="size" v-slot="{ props: fieldProps }" :size="size">
      <input v-bind="fieldProps" :value="'Размер ' + size" readonly />
    </CdsField>
  </div>
</template>

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

Поле с тегами

Контрол в слоте default — любая разметка, поэтому в рамку помещается набор тегов и поле для новой записи. Обработчики focus и blur из слота включают подсветку рамки, dirty показывает крестик, а @click:clear очищает список.

Sandbox Storybook

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

const tags = ref(['Канцелярия', 'Мебель']);
const draft = ref('');

function addTag() {
  const value = draft.value.trim();
  if (!value) return;

  tags.value = [...tags.value, value];
  draft.value = '';
}
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsField
      v-slot="{ props: fieldProps, focus, blur }"
      prepend-inner-icon="tree"
      clearable
      :dirty="!!tags.length"
      @click:clear="tags = []"
    >
      <div v-bind="fieldProps">
        <CdsTag
          v-for="tag of tags"
          :key="tag"
          size="sm"
          :text="tag"
          closable
          @click:close="tags = tags.filter((item) => item !== tag)"
        />

        <input
          v-model="draft"
          class="flex-1 min-w-[80px] bg-transparent outline-none"
          placeholder="Добавить категорию"
          @focus="focus"
          @blur="blur"
          @keydown.enter.prevent="addTag"
        />
      </div>
    </CdsField>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние поля
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте append после содержимого поля
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
centerAffix	boolean | undefined	—	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
clearable	boolean | undefined	—	Отображать кнопку очистки значения
clearIcon	IconValue | undefined	'remove'	Иконка кнопки очистки
color	string | undefined	—	Цвет компонента
details	boolean | undefined	—	Резервирует место под подсказки и сообщения об ошибках под полем
dirty	boolean | undefined	—	Признак того, что значение поля было изменено пользователем
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Состояние ошибки
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Идентификатор поля — значение HTML-атрибута id для вложенного контрола
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
persistentClearable	boolean | undefined	—	Всегда отображать кнопку очистки, а не только при наведении или фокусе
prependInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте prepend перед содержимым поля
readonly	boolean | null | undefined	null	Только для чтения
reverse	boolean | undefined	—	Обратный порядок расположения элементов внутри поля
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента

События

Имя	Тип	Описание
click:clear	[e: MouseEvent]	Клик по кнопке очистки (проп clearable)
update:focused	[focused: boolean]	Вызывается при переходе фокуса на элемент или при его потере

Слоты

Имя	Тип	Описание
append-inner	CdsInputDefaultSlot	Слот, добавляемый в конце инпута ввода
clear	CdsInputDefaultSlot & { props: Record<string, any>; }	Слот для пользовательского иконки очистки (отображается, когда свойство clearable имеет значение «true»).
default	CdsFieldSlot	Контент внутри поля
loader	LoaderSlotProps	Слот для пользовательского загрузчика (отображается, если свойство loading имеет значение true).
prepend-inner	CdsInputDefaultSlot	Слот, добавляемый в начало инпута ввода

Exposed

Имя	Тип	Описание
controlRef	HTMLElement | undefined	Ref-ссылка на контролл поля ввода
fieldIconColor	string | undefined	Цвет иконки