# File inputs

The v-file-input component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress. It is meant to be a direct replacement for a standard file input.

# Usage

At its core, the v-file-input component is a basic container that extends v-text-field.


# Examples

# Props

# Accept

v-file-input component can accept only specific media formats/file types if you want. For more information, checkout the documentation on the accept attribute.

# Chips

A selected file can be displayed as a chip. When using the chips and multiple props, each chip will be displayed (as opposed to the file count).

# Counter

When using the show-size property along with counter, the total number of files and size will be displayed under the input.

# Density

You can reduces the file input height with the density prop.

# Multiple

The v-file-input can contain multiple files at the same time when using the multiple prop.

# Prepend icon

The v-file-input has a default prepend-icon that can be set on the component or adjusted globally. More information on changing global components can be found on the customizing icons page.

# Show size

The displayed size of the selected file(s) can be configured with the show-size property. Display sizes can be either 1024 (the default used when providing true) or 1000.

# Validation

Similar to other inputs, you can use the rules prop to create your own custom validation parameters.

# Slots

# Selection

Using the selection slot, you can customize the appearance of your input selections. This is typically done with chips, however any component or markup can be used.

# Misc

# Complex selection slot

The flexibility of the selection slot allows you accommodate complex use-cases. In this example we show the first 2 selections as chips while adding a number indicator for the remaining amount.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.