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

Анатомия

CdsInput раскладывает по сетке метку (CdsLabel), описание (CdsDescription), внешние иконки, ваш контрол и блок сообщений (CdsMessages). Слот default отдаёт id, messagesId и состояния валидации — все они рефы, поэтому в шаблоне обращайтесь к id.value.

Storybook

Вариации

Метка и описание

Свойство label называет поле, description добавляет пояснение под меткой. Одноимённые слоты принимают произвольную разметку.

Sandbox Storybook

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

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

<template>
  <CdsInput
    v-slot="{ id }"
    label="ИНН организации"
    description="10 цифр для юрлица, 12 — для ИП"
    class="w-[350px] m-auto"
  >
    <CdsField v-slot="{ props: fieldProps, focus, blur }" :id="id.value">
      <input v-bind="fieldProps" v-model="value" placeholder="0000000000" @focus="focus" @blur="blur" />
    </CdsField>
  </CdsInput>
</template>

Сообщения и подсказки

Под полем одна текстовая строка, и свойства делят её по состояниям: messages виден в покое, hint — пока focused, error-messages — поверх остальных. Состояние фокуса CdsInput не отслеживает сам: передайте его пропом focused.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsInput v-slot="{ id }" label="Сообщение" messages="Видно всегда">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>

    <CdsInput v-slot="{ id }" label="Подсказка" hint="Видна, пока поле в фокусе" :focused="focused">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value" :focused="focused">
        <input v-bind="fieldProps" @focus="focused = true" @blur="focused = false" />
      </CdsField>
    </CdsInput>

    <CdsInput v-slot="{ id }" label="Ошибка" :error-messages="['Заполните поле']">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value" error>
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>
  </div>
</template>

Скрытие деталей

Свойство hide-details убирает нижний блок целиком — поля можно ставить вплотную. Значение auto скрывает блок, только пока показывать нечего.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsInput v-slot="{ id }" label="Блок деталей на месте">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>

    <CdsInput v-slot="{ id }" label="Блок деталей скрыт" hide-details>
      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>

    <CdsInput v-slot="{ id }" label="Скрыт, пока нечего показать" hide-details="auto" messages="А теперь есть">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>
  </div>
</template>

Иконки

Свойства prepend-icon и append-icon ставят иконку снаружи контрола. Клики по ним ловят @click:prepend и @click:append.

Sandbox Storybook

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

<template>
  <CdsInput v-slot="{ id }" label="Дата поставки" prepend-icon="calendar" append-icon="info" class="w-[350px] m-auto">
    <CdsField v-slot="{ props: fieldProps }" :id="id.value">
      <input v-bind="fieldProps" readonly />
    </CdsField>
  </CdsInput>
</template>

Направление

Свойство direction меняет сетку: horizontal ставит иконки по бокам контрола, vertical — над и под ним.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-3 w-[350px] m-auto">
    <CdsInput v-slot="{ id }" label="Горизонтально" prepend-icon="file" append-icon="info">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>

    <CdsInput v-slot="{ id }" label="Вертикально" direction="vertical" prepend-icon="file" append-icon="info">
      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
        <input v-bind="fieldProps" readonly />
      </CdsField>
    </CdsInput>
  </div>
</template>

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

Валидация своего поля

Свойство rules принимает функции проверки, validation-value — значение, которое им передавать. Результат приходит в слот через isValid: свяжите его с пропом error у CdsField, и рамка покраснеет вместе с сообщением.

Sandbox Storybook

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

const inn = ref('770');
const focused = ref(false);

const rules = [
  (value: string) => !!value || 'Заполните ИНН',
  (value: string) => /^\d{10}$|^\d{12}$/.test(value) || 'ИНН состоит из 10 или 12 цифр'
];
</script>

<template>
  <CdsInput
    v-slot="{ id, isValid }"
    label="ИНН организации"
    description="10 цифр для юрлица, 12 — для ИП"
    :validation-value="inn"
    :rules="rules"
    :focused="focused"
    class="w-[350px] m-auto"
  >
    <CdsField
      v-slot="{ props: fieldProps }"
      :id="id.value"
      :error="isValid.value === false"
      :focused="focused"
      :dirty="!!inn"
      prepend-inner-icon="company"
      clearable
      @click:clear="inn = ''"
    >
      <input
        v-bind="fieldProps"
        v-model="inn"
        placeholder="0000000000"
        @focus="focused = true"
        @blur="focused = false"
      />
    </CdsField>
  </CdsInput>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
centerAffix	boolean | undefined	true	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
color	string | undefined	—	Цвет компонента
description	string | undefined	—	Описание компонента, отображаемое под меткой
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Отображает компонент в состояние ошибки
errorMessages	string | readonly string[] | null | undefined	[]	Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках. Будет объединяться с любыми проверками, заданными в свойстве rules. Это поле не запускает валидацию.
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
hideDetails	boolean | "auto" | undefined	—	Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
hint	string | undefined	—	Текст подсказки, отображаемый под полем ввода
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Уникальный идентификатор компонента
label	string | undefined	—	Текст метки (label) компонента
maxErrors	string | number | undefined	1	Максимальное число отображаемых ошибок при валидации
maxWidth	string | number | undefined	—	Максимальная ширина компонента
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	any	—	Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
name	string | undefined	—	Имя поля ввода
persistentHint	boolean | undefined	—	Всегда отображать подсказку, а не только при фокусе
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
readonly	boolean | null | undefined	null	Только для чтения
rules	readonly ValidationRule[] | undefined	[]	Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк. Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке. Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
validateOn	ValidateOn | undefined	—	Изменяет тип события, при котором запускается валидация
validationValue	any	—	Значение, используемое при применении правил валидации
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
update:modelValue	[value: any]	Событие, которое срабатывает при изменении модели компонента

Слоты

Имя	Тип	Описание
append	CdsInputSlot	Добавляет элемент после поля ввода
default	CdsInputSlot	Слот по-умолчанию
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
details	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel
message	CdsMessageSlot	Слот для настройки содержания сообщения
messages	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
prepend	CdsInputSlot	Добавляет элемент до поля ввода

Exposed

Имя	Тип	Описание
isDirty	boolean	Является ли поле ввода "грязным"
isDisabled	boolean	Является ли поле ввода заблокированным
isPure	boolean	Является ли поле ввода "чистым"
isReadonly	boolean	Является ли поле ввода только для чтения
isValid	boolean | null	Является ли поле ввода валидным
isValidating	boolean	Является ли поле ввода в процессе валидации
reset	() => Promise<void>	Функция сброса поля ввода в исходное состояние
resetValidation	() => Promise<void>	Функция сброса валидации поля ввода
validate	(silent?: boolean) => Promise<string[]>	Функция валидации поля ввода