For a compact file field in a form row use CdsFileInput; sending the files to the server is the job of CdsUploader.

Anatomy

The frame matches the other form fields (CdsTextInput): the label, the description, the messages and validation work the same way. What the component has of its own is the upload zone with an icon, a title and a browse button, and the list of the chosen files: every file gets a preview (for images), a name, a size and a remove button.

Storybook

Variations

Choosing files

The basic case is a single file: drag it into the zone, paste it from the clipboard or pick it with the button. A repeated choice replaces the file.

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>

The multiple prop allows choosing several files — they pile up as a list under the zone. clearable gives every one of them a remove button, show-size — the 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>

Texts and the icon

Every caption of the zone is configurable: title — the heading, subtitle — the line with the file requirements (visible with size md and lg), browse-text — the text of the button, divider-text — the divider, icon — the icon in the center of the zone.

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>

Sizes

The size prop controls the density of the zone: md is the default, lg adds air, and sm shrinks the zone to a compact row — the browse button is hidden and the whole area becomes clickable.

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>

Layout

inset-file-list moves the list of the chosen files inside the zone — the component does not grow downwards as files are added. hide-browse removes the browse button: the zone is clickable as a whole, but say so in the title.

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>

States

disabled blocks the component, readonly keeps the list visible but forbids changes, loading shows an indicator — while the files are going to the server, for example. error-messages puts the zone into the error state and shows the text under it.

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>

Filtering by type

filter-by-type accepts MIME types, wildcard types and extensions separated by commas (image/*,.pdf). The files that do not fit never get into the model — the rejected event reports them: show the user what exactly was rejected and why.

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>

Slots

The parts of the zone are replaced by the slots of the same name, and item redraws every file in the list: CdsFileUploadItem is available inside — it receives the props of the file automatically, it is enough to pass the handlers from the slot arguments.

Slot name	Description
title / icon / divider	The title, the icon and the divider of the zone
browse	The file browse button (props holds the click handler)
item	An item of the list of the chosen files
single	The only file with inset-file-list and without multiple
default	Your own upload zone as a whole
input	The native input type="file" for manual placement
loader	Your own loading indicator (with loading)
label / description / messages	The texts of the frame — as in the other form fields

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>

Guidelines

Storybook

Scenarios

Applying for a job

The component takes part in CdsForm validation on a par with the other fields: rules receive the chosen files. Here the résumé is required and is accepted as a PDF only — filter-by-type cuts the foreign formats off, and the rules insure against an empty submission and a file that is too heavy.

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>

An image gallery

filter-by-type="image/*" lets images through only — every one of them gets a preview in the list automatically. inset-file-list gathers what was uploaded inside the zone, and show-size helps keep an eye on the volume.

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>

Uploading on selection

The files do not have to wait for the form submission — start the upload right away: watch the model, turn loading on for the duration of the request and confirm the result through messages. The request here is simulated with a timer.

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

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
appendIcon	IconValue | undefined	—	Icon in the append slot, after the content
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
browseText	string | undefined	'$cds.fileUpload.browse'	Text of the file browse button. Supports localization keys ($cds.fileUpload.browse).
centerAffix	boolean | undefined	true	Vertically center the appendInner, prependInner, clearIcon and label elements.
clearable	boolean | undefined	—	Allows removing the chosen files from the list.
color	string | undefined	—	Component color
description	string | undefined	—	Description of the component, shown under the label
disabled	boolean | null | undefined	null	Disabled state
dividerText	string | undefined	'$cds.fileUpload.divider'	Text of the divider between the icon and the file browse button.
error	boolean | undefined	—	Puts the component into the error state
errorMessages	string | readonly string[] | null | undefined	[]	Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the rules prop. This field does not trigger validation.
filterByType	string | undefined	—	Filtering of files by MIME type or extension (image/*,.pdf, for example). The rejected files do not get into the model.
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.
hideBrowse	boolean | undefined	—	Hides the file browse button — the whole upload zone becomes clickable.
hideDetails	boolean | "auto" | undefined	—	Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages
hideMessages	boolean | undefined	—	Hide the messages under the input
hint	string | undefined	—	Hint text shown under the input
icon	IconValue | undefined	'upload'	Icon in the center of the upload zone.
iconColor	string | boolean | undefined	—	Icon color. Accepts a boolean or a color string
id	string | undefined	—	Unique identifier of the component
insetFileList	boolean | undefined	—	Shows the list of the chosen files inside the upload zone instead of under it.
label	string | undefined	—	Label text of the component
loading	string | boolean | undefined	—	Loading indicator for the component
maxErrors	string | number | undefined	1	Maximum number of validation errors shown
maxWidth	string | number | undefined	—	Maximum component width
messages	string | readonly string[] | undefined	[]	Messages shown under the input
minWidth	string | number | undefined	—	Minimum component width
modelValue	File | File[] | null | undefined	null	The chosen files. An array with multiple, a single File otherwise.
multiple	boolean | undefined	—	Allows choosing several files.
name	string | undefined	—	Name of the input
persistentHint	boolean | undefined	—	Always show the hint, not only on focus
prependIcon	IconValue | undefined	—	Icon in the prepend slot, before the content
readonly	boolean | null | undefined	null	Read-only state
rules	readonly ValidationRule[] | undefined	[]	Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string.
scrim	string | boolean | undefined	true	Dimming of the upload zone while files are being dragged over it.
showSize	ShowSize | undefined	false	Shows the size of the file. A number sets the base for the human-readable conversion.
size	"sm" | "md" | "lg" | undefined	'md'	Size of the upload zone. With sm the zone is shown as a compact row without the browse button and the divider.
subtitle	string | undefined	—	Subtitle under the file browse button. Shown with size md and lg only.
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
title	string | undefined	'$cds.fileUpload.title'	Title of the upload zone.
validateOn	ValidateOn | undefined	—	Changes the type of the event that triggers validation
validationValue	any	—	Value used when applying the validation rules
width	string | number | undefined	—	Component width

Events

Name	Type	Description
rejected	[files: File[]]	The files did not pass the filterByType filtering.
update:focused	[focused: boolean]	The focus state changed.
update:modelValue	[files: File[]]	The list of the chosen files changed.

Slots

Name	Type	Description
append	CdsInputSlot	Adds an element after the input
browse	CdsFileUploadBrowseSlot	The file browse button.
default	any	Fully replaces the upload zone with your own markup.
description	{ description: string | undefined; props: Record<string, any>; }	Default slot of the CdsDescription component
details	CdsInputSlot	Slot for custom content that lets you customize how the messages are displayed
divider	any	Divider between the title and the file browse button.
icon	any	Icon in the center of the upload zone.
input	{ inputNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>; }	The native input[type=file], given out for manual placement in the markup.
item	CdsFileUploadFileSlot	An item of the list of the chosen files.
label	{ label: string | undefined; props: Record<string, any>; }	Default slot of the CdsLabel component
loader	LoaderSlotProps	The loading indicator.
message	CdsMessageSlot	Slot for customizing the content of a message
messages	CdsInputSlot	Slot for custom content that lets you customize how the messages are displayed
prepend	CdsInputSlot	Adds an element before the input
single	CdsFileUploadFileSlot	The only chosen file with insetFileList and without multiple.
title	any	Title of the upload zone.

Exposed

Name	Type	Description
controlRef	HTMLInputElement | undefined	Ref to the native input[type=file] element — for opening the file dialog programmatically.
isDirty	boolean	Whether the input is dirty
isDisabled	boolean	Whether the input is disabled
isPure	boolean	Whether the input is pure
isReadonly	boolean	Whether the input is read-only
isValid	boolean | null	Whether the input is valid
isValidating	boolean	Whether the input is being validated
reset	() => Promise<void>	Resets the input to its initial state
resetValidation	() => Promise<void>	Resets the validation of the input
validate	(silent?: boolean) => Promise<string[]>	Validates the input

CdsFileUploadDropzone

Props

Name	Type	Default	Description
browseText	string | undefined	'$cds.fileUpload.browse'	Text of the file browse button. Supports localization keys ($cds.fileUpload.browse).
clearable	boolean | undefined	—	Allows removing the chosen files from the list.
color	string | undefined	—	Background color of the surface
disabled	boolean | null | undefined	null	Disabled state
dividerText	string | undefined	'$cds.fileUpload.divider'	Text of the divider between the icon and the file browse button.
error	boolean | undefined	—	Shows the upload zone in the error state.
height	string | number | undefined	—	Component height
hideBrowse	boolean | undefined	—	Hides the file browse button — the whole upload zone becomes clickable.
icon	IconValue | undefined	'upload'	Icon in the center of the upload zone.
insetFileList	boolean | undefined	—	Shows the list of the chosen files inside the upload zone instead of under it.
length	string | number | undefined	150	Length of the divider. Defaults to pixels.
location	Anchor | null | undefined	—	Position of the element relative to its container, for example "top left", "center", "bottom right".
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
modelValue	File[] | undefined	[]	The list of the chosen files. Used when CdsFileUploadDropzone is applied on its own.
multiple	boolean | undefined	—	Allows choosing several files.
opacity	string | number | undefined	—	Opacity of the divider.
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS positioning of the component — the value of the position property
readonly	boolean | null | undefined	null	Read-only state
scrim	string | boolean | undefined	true	Dimming of the upload zone while files are being dragged over it.
showSize	ShowSize | undefined	false	Shows the size of the file. A number sets the base for the human-readable conversion.
size	"sm" | "md" | "lg" | undefined	'md'	Size of the upload zone. With sm the zone is shown as a compact row without the browse button and the divider.
subtitle	string | undefined	—	Subtitle under the file browse button. Shown with size md and lg only.
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
thickness	string | number | undefined	—	Thickness of the divider. Defaults to pixels.
title	string | undefined	'$cds.fileUpload.title'	Title of the upload zone.
width	string | number | undefined	—	Component width

Events

Name	Type	Description
click:browse	[]	The file browse button was pressed.
click:remove	[index: number]	Removal of a file by its index was requested.
drop	[files: File[]]	Files were dropped into the upload zone.

Slots

Name	Type	Description
browse	CdsFileUploadBrowseSlot	The file browse button.
default	{ isDragging: boolean; hasFiles: boolean; files: readonly File[]; props: { onClick: () => void; }; }	Fully replaces the content of the upload zone.
divider	any	Divider between the title and the file browse button.
icon	any	Icon in the center of the upload zone.
input	any	The native input[type=file].
item	CdsFileUploadFileSlot	An item of the list of the chosen files inside the upload zone.
loader	any	The loading indicator.
single	CdsFileUploadFileSlot	The only chosen file with insetFileList and without multiple.
title	any	Title of the upload zone.

CdsFileUploadItem

Props

Name	Type	Default	Description
active	boolean | undefined	—	Forces the active state of the item
activeClass	string | undefined	—	Class applied to list items when they are in the active state
activeColor	string | undefined	—	Color of the component in its active state
appendAvatar	string | undefined	—	Avatar (image URL) shown after the item content
appendIcon	IconValue | undefined	—	Icon shown after the item content
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
clearable	boolean | undefined	—	Allows removing the file from the list.
color	string | undefined	—	Component color
description	string | number | boolean | undefined	—	Description of the list item shown below the title and the subtitle
disabled	boolean | null | undefined	null	Disabled state
exact	boolean | undefined	—	If true, the active state applies only on an exact route match
file	File | undefined	null	The file shown by the list item.
fileIcon	IconValue | undefined	'file'	Fallback icon for the files that have no preview.
height	string | number | undefined	—	Component height
href	string | undefined	—	The href attribute of the link. When set, the component behaves as a regular link
index	number | undefined	—	Index of the item; used for keyboard navigation
lines	false | "one" | "two" | "three" | undefined	'two'	Number of lines in the list items; affects their height. false turns off the fixed height
link	boolean | undefined	—	Turns the item into a clickable link. Detected automatically when href or to is set
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
nav	boolean | undefined	—	Applies navigation list styles (rounded active items)
prependAvatar	string | undefined	—	Avatar (image URL) shown before the item content
prependGap	string | number | undefined	—	Indent before the item content (reserves space for the prepend icon or avatar)
prependIcon	IconValue | undefined	—	Icon shown before the item content
replace	boolean | undefined	—	If true, navigation replaces the current history entry instead of pushing a new one
showSize	ShowSize | undefined	false	Shows the size of the file instead of its MIME type.
slim	boolean | undefined	—	Removes the inner paddings of the list and of the menu container: the list fills the available area completely
subtitle	string | number | boolean | undefined	—	Subtitle of the item shown below the title
tabindex	string | number | undefined	—	Value of the element tabindex attribute
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
title	string | number | boolean | undefined	—	Title of the item shown in the component
to	LinkTo | undefined	—	Target route or route location object for RouterLink. When set, the component behaves as a RouterLink
value	any	—	Value of the item used for selection and activation in the list
width	string | number | undefined	—	Component width

Events

Name	Type	Description
click	[event: MouseEvent | KeyboardEvent]	A click on the list item.
click:remove	[]	Removal of the file was requested.

Slots

Name	Type	Description
append	ListItemSlot	Content after the item text (in place of the append icon or avatar)
clear	{ props: { onClick: () => void; }; }	The file removal button.
default	ListItemSlot	Default content inside the item
description	ListItemDescriptionSlot	Content of the item description (shown below the title and the subtitle)
prepend	ListItemSlot	Content before the item text (in place of the prepend icon or avatar)
subtitle	ListItemSubtitleSlot	Content of the item subtitle
title	ListItemTitleSlot	Content of the item title

CdsFileUploadList

Props

Name	Type	Default	Description
activatable	boolean | undefined	—	Allows items to be activated (highlighting the current item without selection mode)
activated	any	—	Identifiers of the active items (supports v-model through update:activated)
activeClass	string | undefined	—	Class applied to list items when they are in the active state
activeColor	string | undefined	—	Color of the component in its active state
activeStrategy	ActiveStrategyProp | undefined	—	Activation strategy for items (single, multiple, and so on)
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
clearable	boolean | undefined	—	Allows removing files from the list.
collapseIcon	IconValue | undefined	—	Icon shown on a collapsed group
color	string | undefined	—	Component color
disabled	boolean | null | undefined	null	Disabled state
expandIcon	IconValue | undefined	—	Icon shown on an expanded group
files	File[] | undefined	—	The list of files. Taken from the CdsFileUpload context by default.
filterable	boolean | undefined	—	FOR INTERNAL USE ONLY Turns on filtering mode: the space key does not select an item but is used for typing. Applies to the CdsCombobox and CdsAutocomplete components
height	string | number | undefined	—	Component height
indent	string | number | undefined	—	Indent size for nested item groups
itemChildren	SelectItemKey	'children'	Object field that holds the child items, or a function that returns them
itemProps	SelectItemKey	'props'	Object field that holds the props of the item, or a function that returns them
items	any[] | undefined	[]	Array of items to display
itemsRegistration	ItemsRegistrationType | undefined	'render'	Item registration strategy: render — as they are rendered, otherwise all at once
itemTitle	SelectItemKey	'title'	Object field used as the item title, or a function that returns it
itemType	SelectItemKey	'type'	Object field that defines the item type (item, divider, subheader), or a function that returns it
itemValue	SelectItemKey	'value'	Object field used as the item value, or a function that returns it
lines	false | "one" | "two" | "three" | undefined	false	Number of lines in the list items; affects their height. false turns off the fixed height
mandatory	boolean | undefined	—	Makes the selection mandatory: forbids clearing the selection of the last item
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
nav	boolean | undefined	—	Applies navigation list styles (rounded active items)
navigationIndex	number | undefined	—	Index of the current item during keyboard navigation (supports v-model)
navigationStrategy	"focus" | "track" | undefined	'focus'	Keyboard navigation strategy: focus — moves the focus, track — a virtual cursor
opened	any	—	Identifiers of the expanded groups (supports v-model through update:opened)
openStrategy	OpenStrategyProp | undefined	'list'	Expansion strategy for groups (list, single, multiple)
prependGap	string | number | undefined	—	Indent before the item content (reserves space for the prepend icon or avatar)
required	boolean | undefined	—	Makes the selection mandatory: forbids clearing the selection of the last item
returnObject	boolean | undefined	—	Return an object in the model value instead of an array
selectable	boolean | undefined	—	Allows items to be selected
selected	any	—	Identifiers of the selected items (supports v-model through update:selected)
selectStrategy	SelectStrategyProp | undefined	'single-leaf'	Selection strategy for items (single-leaf, leaf, independent, classic, and so on)
showSize	ShowSize | undefined	false	Shows the size of every file.
slim	boolean | undefined	—	Removes the inner paddings of the list and of the menu container: the list fills the available area completely
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
valueComparator	ValueComparator | undefined	—	Function that compares item values to determine the selected state
width	string | number | undefined	—	Component width

Slots

Name	Type	Description
default	{ files: readonly File[]; onClickRemove: (index: number) => void; }	Fully replaces the content of the list.
item	CdsFileUploadFileSlot	An item of the list.