VFileUploadList API

Props

name	type	default
`activatable`	boolean	false
Designates whether the list items are activatable. Additionally, sets necessary accessibility attributes internally.
`activated`	any	undefined
Array of ids of activated nodes.
`active-class`	string	undefined
The class applied to the component when it is in an active state.
`active-color`	string	undefined
Deprecated, use `color` instead.
`active-strategy`	\| 'single-leaf' \| 'leaf' \| 'independent' \| 'single-independent' \| ActiveStrategy \| ((mandatory: boolean) => ActiveStrategy)	undefined
Affects how items with children behave when activated. If not specified, the single-independent strategy will be used. leaf: Only leaf nodes (items without children) can be activated. single-leaf: Similar as leaf, but only a single item can be activated at a time. independent: All nodes can be activated whether they have children or not. single-independent: Similar as independent, but only a single item can be activated at a time.
`base-color`	string	undefined
Sets the color of component when not focused.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`clearable`	boolean	false
Allows for the component to be cleared.
`collapse-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Icon to display when the list item is expanded.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Puts all children inputs into a disabled state.
`elevation`	string \| number	0
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`expand-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Icon to display when the list item is collapsed.
`files`	File[]	undefined
An array of File objects to display in the list. When used inside a VFileUpload, this is provided automatically via injection.
`filterable`	boolean	false
FOR INTERNAL USE ONLY Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox.
`height`	string \| number	undefined
Sets the height for the component.
`indent`	string \| number	undefined
Overrides the indent size for nested groups.
`item-children`	SelectItemKey	'children'
Property on supplied `items` that contains its children.
`item-props`	SelectItemKey	'props'
Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component.
`items`	any[]	[]
Can be an array of objects or strings. By default objects should have a title property, and can optionally have a props property containing any VListItem props, a value property to allow selection, and a children property containing more item objects. Keys to use for these can be changed with the item-title, item-value, item-props, and item-children props.
`items-registration`	'props' \| 'render'	'render'
When set to ‘props’, skips rendering collapsed items/nodes (for significant performance gains).
`item-title`	SelectItemKey	'title'
Property on supplied `items` that contains its title.
`item-type`	SelectItemKey	'type'
Designates the key on the supplied items that is used for determining the nodes type.
`item-value`	SelectItemKey	'value'
Property on supplied `items` that contains its value.
`lines`	false \| 'one' \| 'two' \| 'three'	false
Designates a minimum-height for all children `v-list-item` components. This prop uses line-clamp and is not supported in all browsers.
`mandatory`	boolean	false
Forces at least one item to always be selected (if available).
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`nav`	boolean	false
An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with v-navigation-drawer.
`navigation-index`	number	undefined
Specifies the currently selected navigation index when using `navigationStrategy="track"`. Can be used with `v-model:navigationIndex` for two-way binding. Items at this index receive visual keyboard focus styling and automatic scrolling. Note: Only works with the `items` prop, not with slotted items.
`navigation-strategy`	'focus' \| 'track'	'focus'
Determines keyboard navigation behavior. focus (default) moves DOM focus to items, suitable for traditional lists. track provides visual keyboard focus without moving DOM focus, ideal for command palettes and autocomplete where an external element retains focus. When track mode is active, items automatically receive `tabindex="-1"`, proper `aria-activedescendant` is set on the list container, and keyboard-focused items display focus-visible styling with auto-scrolling.
`opened`	any	undefined
An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.
`open-strategy`	'list' \| 'multiple' \| 'single' \| OpenStrategy	'list'
Affects how items with children behave when expanded. multiple: Any number of groups can be open at once. single: Only one group at each level can be open, opening a group will cause others to close. list: Multiple, but all other groups will close when an item is selected.
`prepend-gap`	string \| number	undefined
Sets the horizontal spacing between prepend slot and the main content within list item. Also affects indent to ensure expected alignment of group children.
`return-object`	boolean	false
Changes the selection behavior to return the object directly rather than the value specified with item-value.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`selectable`	boolean	false
Designates whether the list items are selectable. Additionally, sets necessary accessibility attributes internally.
`selected`	any	undefined
An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.
`select-strategy`	\| 'single-leaf' \| 'leaf' \| 'independent' \| 'single-independent' \| 'classic' \| 'trunk' \| 'branch' \| SelectStrategy \| ((mandatory: boolean) => SelectStrategy)	'single-leaf'
Affects how items with children behave when selected. leaf: Only leaf nodes (items without children) can be selected. independent: All nodes can be selected whether they have children or not. classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model. trunk: Same as classic but if all of a node’s children are selected then only that node will be added to the model. branch: Same as classic but if any of a node’s children are selected then that node will also be added to the model.
`show-size`	boolean	false
Shows the size of each file.
`slim`	boolean	false
Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`value-comparator`	(a: any, b: any) => boolean	undefined
Apply a custom comparison algorithm to compare model-value and values contains in the items prop.
`variant`	'flat' \| 'text' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'text'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:open`	[{ id: unknown; value: boolean; path: unknown[] }]
Emitted when the list item is opened.
`click:select`	[{ id: unknown; value: boolean; path: unknown[] }]
Emitted when the list item is selected.
`update:opened`	[unknown]
Emitted when the list item is opened.

Slots

{ files: File[]; onClickRemove: (index: number) => void }

{ file: File; props: { 'onClick:remove': () => void } }

`default`
The default Vue slot.
`item`
Slot for rendering custom list items. Receives `{ props }` where `props` contains item data (`title`, `subtitle`, `value`, etc.) plus `index` (the item’s position in the list). Use this to completely customize item rendering while still using VList’s navigation and selection features.

#VFileUploadList API

VFileUploadList API