packages/docs/src/pages/en/components/file-inputs.md
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.
At its core, v-file-input is built on the same VField and VInput primitives as v-text-field, giving it a consistent look and feel without directly extending it.
| Component | Description |
|---|---|
| v-file-input | Primary component |
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.
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).
<ExamplesExample file="v-file-input/prop-chips" />When using the show-size property along with counter, the total number of files and size will be displayed under the input.
<ExamplesExample file="v-file-input/prop-counter" />You can reduces the file input height with the density prop.
<ExamplesExample file="v-file-input/prop-dense" />The v-file-input can contain multiple files at the same time when using the multiple prop.
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.
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.
<ExamplesExample file="v-file-input/prop-show-size" />Similar to other inputs, you can use the rules prop to create your own custom validation parameters. If multiple props is set, thevalue passed in the validation functions will be an array.
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.
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.
<ExamplesExample file="v-file-input/misc-complex-selection" />