For regular input take the ready-made fields — CdsTextInput, CdsSelect, CdsTextArea. CdsField is needed when your control is not in the library. The label, the description and the messages around the frame are added by CdsInput.

Anatomy

The default slot receives a props object — bind it to your control so the field gets an id, a class and the link to the messages. Around the control CdsField lays out the inner icons and the clear button.

Storybook

Variations

Icons

The prepend-inner-icon and append-inner-icon props put an icon inside the frame — before and after the control. The same areas are available as the prepend-inner and append-inner slots when you need a button rather than an icon.

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>

Clearing

The clearable prop adds a cross; it shows up when the field is marked dirty and appears on hover or focus. The persistent-clearable prop keeps the cross visible at all times. The value is reset not by the component but by you — in the @click:clear handler.

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>

States

The disabled, readonly and error props change the color of the frame and of the text. Set the state of the control inside separately: CdsField draws the frame but does not control your 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

The loading prop shows a bar under the field. The circle value replaces it with a circular indicator inside the frame — handier when the field waits for a server response while typing.

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>

Sizes

The size prop changes the height of the frame and its inner paddings. The default size is 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>

Scenarios

A field with tags

The control in the default slot is any markup you like, so a set of tags and an input for a new entry fit inside the frame. The focus and blur handlers from the slot turn the highlighting of the frame on, dirty shows the cross, and @click:clear empties the list.

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

Props

Name	Type	Default	Description
active	boolean | undefined	—	Active state of the field
activeColor	string | undefined	—	Color of the component in its active state
appendInnerIcon	IconValue | undefined	—	Icon in the inner append slot, after the content of the field
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
centerAffix	boolean | undefined	—	Vertically center the appendInner, prependInner, clearIcon and label elements.
clearable	boolean | undefined	—	Shows the clear button
clearIcon	IconValue | undefined	'remove'	Icon of the clear button
color	string | undefined	—	Component color
details	boolean | undefined	—	Reserves the space for hints and error messages under the field
dirty	boolean | undefined	—	Marks that the value of the field was changed by the user
disabled	boolean | null | undefined	null	Disabled state
error	boolean | undefined	—	Error state
focused	boolean | undefined	—	Controls the focus state of the component. When true, the component is considered focused and may apply the corresponding styles or behavior.
iconColor	string | boolean | undefined	—	Icon color. Accepts a boolean or a color string
id	string | undefined	—	Field identifier — the value of the id HTML attribute for the inner control
loading	string | boolean | undefined	—	Loading indicator for the component
persistentClearable	boolean | undefined	—	Always show the clear button, not only on hover or focus
prependInnerIcon	IconValue | undefined	—	Icon in the inner prepend slot, before the content of the field
readonly	boolean | null | undefined	null	Read-only state
reverse	boolean | undefined	—	Reverses the order of the elements inside the field
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme

Events

Name	Type	Description
click:clear	[e: MouseEvent]	Click on the clear button (clearable prop)
update:focused	[focused: boolean]	Fires when the element gains or loses focus

Slots

Name	Type	Description
append-inner	CdsInputDefaultSlot	Slot added at the end of the input
clear	CdsInputDefaultSlot & { props: Record<string, any>; }	Slot for a custom clear icon (shown when the clearable prop is true).
default	CdsFieldSlot	Content inside the field
loader	LoaderSlotProps	Slot for a custom loader (shown when the loading prop is true).
prepend-inner	CdsInputDefaultSlot	Slot added at the start of the input

Exposed

Name	Type	Description
controlRef	HTMLElement | undefined	Ref to the control of the input
fieldIconColor	string | undefined	Icon color