Для компактного поля выбора файлов в строке формы используйте CdsFileInput, за отправку файлов на сервер отвечает CdsUploader.

Анатомия

Каркас совпадает с остальными полями формы (CdsTextInput): лейбл, описание, сообщения и валидация работают одинаково. Своё у компонента — зона загрузки с иконкой, заголовком и кнопкой выбора, а также список выбранных файлов: каждый файл получает превью (для изображений), имя, размер и кнопку удаления.

Storybook

Вариации

Выбор файлов

Базовый случай — один файл: перетащите его в зону, вставьте из буфера обмена или выберите кнопкой. Повторный выбор заменяет файл.

Sandbox Storybook

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

const model = ref<File | null>(null);
</script>

<template>
  <div class="max-w-lg m-auto">
    <CdsFileUpload v-model="model" />
  </div>
</template>

Свойство multiple разрешает выбрать несколько файлов — они копятся списком под зоной. clearable добавляет каждому кнопку удаления, show-size — размер.

Sandbox Storybook

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

const model = ref<File[]>([]);
</script>

<template>
  <div class="flex flex-col gap-4 max-w-lg m-auto">
    <CdsFileUpload v-model="model" subtitle="Можно выбрать несколько файлов сразу" multiple clearable show-size />

    <p class="text-200 text-content-secondary text-center">Выбрано файлов: {{ model.length }}</p>
  </div>
</template>

Тексты и иконка

Все надписи зоны настраиваются: title — заголовок, subtitle — строка с требованиями к файлам (видна при size md и lg), browse-text — текст кнопки, divider-text — разделитель, icon — иконка в центре зоны.

Sandbox Storybook

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

const model = ref<File[]>([]);
</script>

<template>
  <div class="max-w-lg m-auto">
    <CdsFileUpload
      v-model="model"
      icon="file-download"
      title="Перетащите сканы документов"
      divider-text="или"
      browse-text="Выберите на компьютере"
      subtitle="PDF или JPG до 10 МБ"
      multiple
    />
  </div>
</template>

Размеры

Свойство size управляет плотностью зоны: md — по умолчанию, lg добавляет воздуха, а sm сжимает зону до компактной строки — кнопка выбора скрывается, кликабельной становится вся область.

Sandbox Storybook

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

const small = ref<File[]>([]);
const medium = ref<File[]>([]);
const large = ref<File[]>([]);
</script>

<template>
  <div class="flex flex-col gap-6 max-w-lg m-auto">
    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">size="sm" — компактная строка, кликабельна целиком</span>
      <CdsFileUpload v-model="small" size="sm" />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">size="md" — по умолчанию</span>
      <CdsFileUpload v-model="medium" />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">size="lg" — просторная зона</span>
      <CdsFileUpload v-model="large" size="lg" />
    </div>
  </div>
</template>

Компоновка

inset-file-list переносит список выбранных файлов внутрь зоны — компонент не разрастается вниз при добавлении файлов. hide-browse убирает кнопку выбора: зона кликабельна целиком, но подскажите это заголовком.

Sandbox Storybook

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

const inset = ref<File[]>([]);
const clickable = ref<File[]>([]);
</script>

<template>
  <div class="flex flex-col gap-6 max-w-lg m-auto">
    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">inset-file-list — список файлов внутри зоны</span>
      <CdsFileUpload v-model="inset" multiple clearable show-size inset-file-list />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">hide-browse — без кнопки, кликабельна вся зона</span>
      <CdsFileUpload v-model="clickable" hide-browse title="Нажмите или перетащите файлы" />
    </div>
  </div>
</template>

Состояния

disabled блокирует компонент, readonly оставляет список видимым, но запрещает изменения, loading показывает индикатор — например, пока файлы уходят на сервер. error-messages переводит зону в состояние ошибки и выводит текст под ней.

Sandbox Storybook

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

const readonlyFiles = ref<File[]>([]);

// Файлы создаются только в браузере — SSR-сборка сайта обходится без File
onMounted(() => {
  readonlyFiles.value = [new File([new Uint8Array(1_200_000)], 'договор-поставки.pdf', { type: 'application/pdf' })];
});
</script>

<template>
  <div class="flex flex-col gap-6 max-w-lg m-auto">
    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">disabled</span>
      <CdsFileUpload disabled />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">readonly — файлы видны, но изменить их нельзя</span>
      <CdsFileUpload :model-value="readonlyFiles" readonly show-size />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">loading</span>
      <CdsFileUpload loading />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-200 text-content-secondary">error — обязательное поле</span>
      <CdsFileUpload :error-messages="['Прикрепите хотя бы один файл']" />
    </div>
  </div>
</template>

Фильтрация по типу

filter-by-type принимает MIME-типы, wildcard-типы и расширения через запятую (image/*,.pdf). Неподходящие файлы не попадают в модель — о них сообщает событие rejected: покажите пользователю, что именно отклонено и почему.

Sandbox Storybook

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

const files = ref<File[]>([]);
const rejectedMessages = ref<string[]>([]);

// `rejected` срабатывает до обновления модели — флаг защищает свежие
// сообщения от сброса в обработчике update:model-value
let justRejected = false;

function onRejected(rejected: File[]) {
  rejectedMessages.value = rejected.map((file) => `${file.name} — не подходит по формату`);
  justRejected = true;
}

function onUpdate() {
  if (justRejected) {
    justRejected = false;

    return;
  }

  rejectedMessages.value = [];
}
</script>

<template>
  <div class="max-w-lg m-auto">
    <CdsFileUpload
      v-model="files"
      title="Перетащите изображения или PDF"
      subtitle="Другие форматы будут отклонены"
      filter-by-type="image/*,.pdf"
      multiple
      clearable
      :error-messages="rejectedMessages"
      @rejected="onRejected"
      @update:model-value="onUpdate"
    />
  </div>
</template>

Слоты

Части зоны заменяются одноимёнными слотами, а item перерисовывает каждый файл в списке: внутри доступен CdsFileUploadItem — пропсы файла он получает автоматически, достаточно передать обработчики из аргументов слота.

Имя слота	Описание
title / icon / divider	Заголовок, иконка и разделитель зоны
browse	Кнопка выбора файлов (в props — обработчик клика)
item	Элемент списка выбранных файлов
single	Единственный файл при inset-file-list без multiple
default	Своя зона загрузки целиком
input	Нативный input type="file" для ручного размещения
loader	Свой индикатор загрузки (при loading)
label / description / messages	Тексты каркаса — как у остальных полей формы

Sandbox Storybook

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

const model = ref<File[]>([]);

const extension = (file: File) => file.name.split('.').at(-1)?.toUpperCase() ?? 'ФАЙЛ';
</script>

<template>
  <div class="max-w-lg m-auto">
    <CdsFileUpload v-model="model" multiple clearable show-size>
      <template #item="{ file, props }">
        <CdsFileUploadItem v-bind="props">
          <template #append>
            <CdsTag size="sm" :text="extension(file)" />
          </template>
        </CdsFileUploadItem>
      </template>
    </CdsFileUpload>
  </div>
</template>

Рекомендации

Storybook

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

Отклик на вакансию

Компонент участвует в валидации CdsForm наравне с остальными полями: rules получают выбранные файлы. Здесь резюме обязательно и принимается только в PDF — filter-by-type отсекает чужие форматы, а правила страхуют от пустой отправки и слишком тяжёлого файла.

Sandbox Storybook

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

const valid = ref(false);
const name = ref('');
const resume = ref<File>();
const loading = ref(false);
const sent = ref(false);

const nameRules = [(value: string) => !!value || 'Представьтесь, пожалуйста'];

const resumeRules = [
  (value?: File) => !!value || 'Приложите резюме в PDF',
  (value?: File) => !value || value.size <= 10 * 1024 * 1024 || 'Файл больше 10 МБ — сожмите его'
];

async function submit() {
  if (!valid.value) return;

  try {
    loading.value = true;
    sent.value = false;
    await new Promise((resolve) => setTimeout(resolve, 1500));
    sent.value = true;
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <CdsForm v-model="valid" class="flex flex-col gap-2 w-[400px] m-auto" @submit.prevent="submit">
    <CdsTextInput v-model="name" label="Имя и фамилия" placeholder="Введите ФИО" :rules="nameRules" />

    <CdsFileUpload
      v-model="resume"
      label="Резюме"
      subtitle="PDF до 10 МБ"
      filter-by-type=".pdf"
      :rules="resumeRules"
      clearable
      show-size
    />

    <CdsButton type="submit" :loading="loading" text="Откликнуться" />

    <p v-if="sent" class="text-sm text-center">Отклик отправлен</p>
  </CdsForm>
</template>

Галерея изображений

filter-by-type="image/*" пропускает только картинки — каждая автоматически получает превью в списке. inset-file-list собирает загруженное внутри зоны, show-size помогает следить за объёмом.

Sandbox Storybook

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

const images = ref<File[]>([]);
</script>

<template>
  <div class="max-w-lg m-auto">
    <CdsFileUpload
      v-model="images"
      title="Перетащите фотографии"
      subtitle="PNG или JPG — превью появится в списке"
      filter-by-type="image/*"
      multiple
      clearable
      show-size
      inset-file-list
    />
  </div>
</template>

Загрузка при выборе

Файлы не обязаны ждать отправки формы — начните загрузку сразу: следите за моделью, включайте loading на время запроса и подтверждайте результат через messages. Здесь запрос имитируется таймером.

Sandbox Storybook

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

const files = ref<File[]>([]);
const loading = ref(false);
const uploaded = ref(false);

let timer: ReturnType<typeof setTimeout>;

// Имитация запроса: новые файлы «уходят на сервер» полторы секунды
watch(
  () => files.value.length,
  (length, previous) => {
    clearTimeout(timer);
    uploaded.value = false;
    loading.value = false;

    if (length > (previous ?? 0)) {
      loading.value = true;
      timer = setTimeout(() => {
        loading.value = false;
        uploaded.value = true;
      }, 1500);
    }
  }
);
</script>

<template>
  <div class="max-w-lg m-auto">
    <CdsFileUpload
      v-model="files"
      title="Файлы отправятся сразу после выбора"
      :loading="loading"
      :messages="uploaded ? 'Файлы загружены' : undefined"
      multiple
      clearable
      show-size
    />
  </div>
</template>

API

CdsFileUpload

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
browseText	string | undefined	'$cds.fileUpload.browse'	Текст кнопки выбора файлов. Поддерживает ключи локализации ($cds.fileUpload.browse).
centerAffix	boolean | undefined	true	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
clearable	boolean | undefined	—	Разрешает удалять выбранные файлы из списка.
color	string | undefined	—	Цвет компонента
description	string | undefined	—	Описание компонента, отображаемое под меткой
disabled	boolean | null | undefined	null	Заблокированное состояние
dividerText	string | undefined	'$cds.fileUpload.divider'	Текст разделителя между иконкой и кнопкой выбора файлов.
error	boolean | undefined	—	Отображает компонент в состояние ошибки
errorMessages	string | readonly string[] | null | undefined	[]	Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках. Будет объединяться с любыми проверками, заданными в свойстве rules. Это поле не запускает валидацию.
filterByType	string | undefined	—	Фильтрация файлов по MIME-типу или расширению (например image/*,.pdf). Отклонённые файлы не попадают в модель.
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
hideBrowse	boolean | undefined	—	Скрывает кнопку выбора файлов — зона загрузки становится кликабельной целиком.
hideDetails	boolean | "auto" | undefined	—	Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
hint	string | undefined	—	Текст подсказки, отображаемый под полем ввода
icon	IconValue | undefined	'upload'	Иконка в центре зоны загрузки.
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Уникальный идентификатор компонента
insetFileList	boolean | undefined	—	Отображает список выбранных файлов внутри зоны загрузки, а не под ней.
label	string | undefined	—	Текст метки (label) компонента
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
maxErrors	string | number | undefined	1	Максимальное число отображаемых ошибок при валидации
maxWidth	string | number | undefined	—	Максимальная ширина компонента
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	File | File[] | null | undefined	null	Выбранные файлы. Массив при multiple, иначе одиночный File.
multiple	boolean | undefined	—	Разрешает выбор нескольких файлов.
name	string | undefined	—	Имя поля ввода
persistentHint	boolean | undefined	—	Всегда отображать подсказку, а не только при фокусе
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
readonly	boolean | null | undefined	null	Только для чтения
rules	readonly ValidationRule[] | undefined	[]	Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк. Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке. Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
scrim	string | boolean | undefined	true	Затемнение зоны загрузки при перетаскивании файлов.
showSize	ShowSize | undefined	false	Отображает размер файла. Число задаёт основание для перевода в человекочитаемый вид.
size	"sm" | "md" | "lg" | undefined	'md'	Размер зоны загрузки. При sm зона отображается компактной строкой без кнопки выбора файлов и разделителя.
subtitle	string | undefined	—	Подзаголовок под кнопкой выбора файлов. Отображается только при size md и lg.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
title	string | undefined	'$cds.fileUpload.title'	Заголовок зоны загрузки.
validateOn	ValidateOn | undefined	—	Изменяет тип события, при котором запускается валидация
validationValue	any	—	Значение, используемое при применении правил валидации
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
rejected	[files: File[]]	Файлы не прошли фильтрацию по filterByType.
update:focused	[focused: boolean]	Изменилось состояние фокуса.
update:modelValue	[files: File[]]	Список выбранных файлов изменился.

Слоты

Имя	Тип	Описание
append	CdsInputSlot	Добавляет элемент после поля ввода
browse	CdsFileUploadBrowseSlot	Кнопка выбора файлов.
default	any	Полностью заменяет зону загрузки собственной разметкой.
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
details	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
divider	any	Разделитель между заголовком и кнопкой выбора файлов.
icon	any	Иконка в центре зоны загрузки.
input	{ inputNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>; }	Нативный input[type=file], отдаётся для ручного размещения в разметке.
item	CdsFileUploadFileSlot	Элемент списка выбранных файлов.
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel
loader	LoaderSlotProps	Индикатор загрузки.
message	CdsMessageSlot	Слот для настройки содержания сообщения
messages	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
prepend	CdsInputSlot	Добавляет элемент до поля ввода
single	CdsFileUploadFileSlot	Единственный выбранный файл при insetFileList без multiple.
title	any	Заголовок зоны загрузки.

Exposed

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

CdsFileUploadDropzone

Пропсы

Имя	Тип	По умолчанию	Описание
browseText	string | undefined	'$cds.fileUpload.browse'	Текст кнопки выбора файлов. Поддерживает ключи локализации ($cds.fileUpload.browse).
clearable	boolean | undefined	—	Разрешает удалять выбранные файлы из списка.
color	string | undefined	—	Цвет фона поверхности
disabled	boolean | null | undefined	null	Заблокированное состояние
dividerText	string | undefined	'$cds.fileUpload.divider'	Текст разделителя между иконкой и кнопкой выбора файлов.
error	boolean | undefined	—	Отображает зону загрузки в состоянии ошибки.
height	string | number | undefined	—	Высота компонента
hideBrowse	boolean | undefined	—	Скрывает кнопку выбора файлов — зона загрузки становится кликабельной целиком.
icon	IconValue | undefined	'upload'	Иконка в центре зоны загрузки.
insetFileList	boolean | undefined	—	Отображает список выбранных файлов внутри зоны загрузки, а не под ней.
length	string | number | undefined	150	Длина разделителя. Единица измерения по умолчанию — пиксели.
location	Anchor | null | undefined	—	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	File[] | undefined	[]	Список выбранных файлов. Используется, когда CdsFileUploadDropzone применяется автономно.
multiple	boolean | undefined	—	Разрешает выбор нескольких файлов.
opacity	string | number | undefined	—	Прозрачность разделителя.
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS-позиционирование компонента — значение свойства position
readonly	boolean | null | undefined	null	Только для чтения
scrim	string | boolean | undefined	true	Затемнение зоны загрузки при перетаскивании файлов.
showSize	ShowSize | undefined	false	Отображает размер файла. Число задаёт основание для перевода в человекочитаемый вид.
size	"sm" | "md" | "lg" | undefined	'md'	Размер зоны загрузки. При sm зона отображается компактной строкой без кнопки выбора файлов и разделителя.
subtitle	string | undefined	—	Подзаголовок под кнопкой выбора файлов. Отображается только при size md и lg.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
thickness	string | number | undefined	—	Толщина разделителя. Единица измерения по умолчанию — пиксели.
title	string | undefined	'$cds.fileUpload.title'	Заголовок зоны загрузки.
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
click:browse	[]	Нажата кнопка выбора файлов.
click:remove	[index: number]	Запрошено удаление файла по индексу.
drop	[files: File[]]	Файлы перенесены в зону загрузки.

Слоты

Имя	Тип	Описание
browse	CdsFileUploadBrowseSlot	Кнопка выбора файлов.
default	{ isDragging: boolean; hasFiles: boolean; files: readonly File[]; props: { onClick: () => void; }; }	Полностью заменяет содержимое зоны загрузки.
divider	any	Разделитель между заголовком и кнопкой выбора файлов.
icon	any	Иконка в центре зоны загрузки.
input	any	Нативный input[type=file].
item	CdsFileUploadFileSlot	Элемент списка выбранных файлов внутри зоны загрузки.
loader	any	Индикатор загрузки.
single	CdsFileUploadFileSlot	Единственный выбранный файл при insetFileList без multiple.
title	any	Заголовок зоны загрузки.

CdsFileUploadItem

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Принудительно задаёт активное состояние элемента
activeClass	string | undefined	—	Класс, применяемый к элементам списка, когда они находятся в активном состоянии
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendAvatar	string | undefined	—	Аватар (URL изображения), отображаемый после контента элемента
appendIcon	IconValue | undefined	—	Иконка, отображаемая после контента элемента
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
clearable	boolean | undefined	—	Разрешает удалить файл из списка.
color	string | undefined	—	Цвет компонента
description	string | number | boolean | undefined	—	Описание элемента списка, отображаемое под заголовком и подзаголовком
disabled	boolean | null | undefined	null	Заблокированное состояние
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
file	File | undefined	null	Файл, который отображает элемент списка.
fileIcon	IconValue | undefined	'file'	Иконка-заглушка для файлов, у которых нет превью.
height	string | number | undefined	—	Высота компонента
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
index	number | undefined	—	Индекс элемента, используется для клавиатурной навигации
lines	false | "one" | "two" | "three" | undefined	'two'	Количество строк в элементах списка, влияет на их высоту. false отключает фиксированную высоту
link	boolean | undefined	—	Делает элемент кликабельной ссылкой. Определяется автоматически при наличии href/to
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
nav	boolean | undefined	—	Применяет стили навигационного списка (скруглённые активные элементы)
prependAvatar	string | undefined	—	Аватар (URL изображения), отображаемый перед контентом элемента
prependGap	string | number | undefined	—	Отступ перед контентом элемента (резервируется место под prepend-иконку/аватар)
prependIcon	IconValue | undefined	—	Иконка, отображаемая перед контентом элемента
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
showSize	ShowSize | undefined	false	Отображает размер файла вместо его MIME-типа.
slim	boolean | undefined	—	Убирает внутренние отступы списка и контейнера меню: список полностью заполняет доступную область
subtitle	string | number | boolean | undefined	—	Подзаголовок элемента, отображаемый под заголовком
tabindex	string | number | undefined	—	Значение атрибута tabindex элемента
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
title	string | number | boolean | undefined	—	Заголовок элемента, отображаемый в компоненте
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
value	any	—	Значение элемента, используемое при выборе/активации в списке
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
click	[event: MouseEvent | KeyboardEvent]	Клик по элементу списка.
click:remove	[]	Запрошено удаление файла.

Слоты

Имя	Тип	Описание
append	ListItemSlot	Контент после текста элемента (на месте append-иконки/аватара)
clear	{ props: { onClick: () => void; }; }	Кнопка удаления файла.
default	ListItemSlot	Контент по умолчанию внутри элемента
description	ListItemDescriptionSlot	Контент описания элемента (отображается под заголовком и подзаголовком)
prepend	ListItemSlot	Контент перед текстом элемента (на месте prepend-иконки/аватара)
subtitle	ListItemSubtitleSlot	Контент подзаголовка элемента
title	ListItemTitleSlot	Контент заголовка элемента

CdsFileUploadList

Пропсы

Имя	Тип	По умолчанию	Описание
activatable	boolean | undefined	—	Разрешает активацию элементов (выделение текущего элемента без режима выбора)
activated	any	—	Идентификаторы активных элементов (поддерживает v-model через update:activated)
activeClass	string | undefined	—	Класс, применяемый к элементам списка, когда они находятся в активном состоянии
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
activeStrategy	ActiveStrategyProp | undefined	—	Стратегия активации элементов (одиночная, множественная и т.д.)
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
clearable	boolean | undefined	—	Разрешает удалять файлы из списка.
collapseIcon	IconValue | undefined	—	Иконка, отображаемая у свёрнутой группы
color	string | undefined	—	Цвет компонента
disabled	boolean | null | undefined	null	Заблокированное состояние
expandIcon	IconValue | undefined	—	Иконка, отображаемая у раскрытой группы
files	File[] | undefined	—	Список файлов. По умолчанию берётся из контекста CdsFileUpload.
filterable	boolean | undefined	—	FOR INTERNAL USE ONLY Включает режим фильтрации: пробел не выбирает элемент, а используется для ввода. Применимо в компонентах CdsCombobox, CdsAutocomplete
height	string | number | undefined	—	Высота компонента
indent	string | number | undefined	—	Величина отступа для вложенных групп элементов
itemChildren	SelectItemKey	'children'	Свойство объекта, содержащее дочерние элементы, либо функция для их получения
itemProps	SelectItemKey	'props'	Свойство объекта, содержащее пропсы для элемента, либо функция для их получения
items	any[] | undefined	[]	Массив элементов для отображения
itemsRegistration	ItemsRegistrationType | undefined	'render'	Стратегия регистрации элементов: render — по мере рендеринга, иначе единоразово
itemTitle	SelectItemKey	'title'	Свойство объекта, используемое как заголовок элемента, либо функция для его получения
itemType	SelectItemKey	'type'	Свойство объекта, определяющее тип элемента (item, divider, subheader), либо функция для его получения
itemValue	SelectItemKey	'value'	Свойство объекта, используемое как значение элемента, либо функция для его получения
lines	false | "one" | "two" | "three" | undefined	false	Количество строк в элементах списка, влияет на их высоту. false отключает фиксированную высоту
mandatory	boolean | undefined	—	Делает выбор обязательным: запрещает снимать выбор с последнего элемента
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
nav	boolean | undefined	—	Применяет стили навигационного списка (скруглённые активные элементы)
navigationIndex	number | undefined	—	Индекс текущего элемента при клавиатурной навигации (поддерживает v-model)
navigationStrategy	"focus" | "track" | undefined	'focus'	Стратегия клавиатурной навигации: focus — перенос фокуса, track — виртуальный курсор
opened	any	—	Идентификаторы раскрытых групп (поддерживает v-model через update:opened)
openStrategy	OpenStrategyProp | undefined	'list'	Стратегия раскрытия групп (list, single, multiple)
prependGap	string | number | undefined	—	Отступ перед контентом элемента (резервируется место под prepend-иконку/аватар)
required	boolean | undefined	—	Делает выбор обязательным: запрещает снимать выбор с последнего элемента
returnObject	boolean | undefined	—	Возвращать в значении модели объект вместо массива
selectable	boolean | undefined	—	Разрешает выбор элементов
selected	any	—	Идентификаторы выбранных элементов (поддерживает v-model через update:selected)
selectStrategy	SelectStrategyProp | undefined	'single-leaf'	Стратегия выбора элементов (single-leaf, leaf, independent, classic и т.д.)
showSize	ShowSize | undefined	false	Отображает размер каждого файла.
slim	boolean | undefined	—	Убирает внутренние отступы списка и контейнера меню: список полностью заполняет доступную область
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
valueComparator	ValueComparator | undefined	—	Функция сравнения значений элементов для определения выбранного состояния
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
default	{ files: readonly File[]; onClickRemove: (index: number) => void; }	Полностью заменяет содержимое списка.
item	CdsFileUploadFileSlot	Элемент списка.