VFileInput API

Props

name	type	default
`active`	boolean	false
Controls the active state of the item. This is typically used to highlight the component.
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component after default content in the append slot.
`append-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component in the append-inner slot.
`base-color`	string	undefined
Sets the color of the input when it is 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.
`center-affix`	boolean	undefined
Vertically align appendInner, prependInner, clearIcon and label in the center.
`chips`	boolean	false
Changes display of selections to chips.
`clearable`	boolean	true
Allows for the component to be cleared.
`clear-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$clear'
The icon used when the clearable prop is set to true.
`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.
`counter`	boolean	false
Displays the number of selected files.
`counter-size-string`	string	'$vuetify.fileInput.counterSize'
The text displayed when using the counter and show-size props. Can also be customized globally on the internationalization page.
`counter-string`	string	'$vuetify.fileInput.counter'
The text displayed when using the counter prop. Can also be customized globally on the internationalization page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`dirty`	boolean	false
Manually apply the dirty state styling.
`disabled`	boolean	null
Removes the ability to click or target the input.
`error`	boolean	false
Puts the input in a manual error state.
`error-messages`	string \| string[]	[]
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.
`filter-by-type` New in v3.10.0	string	undefined
Make the input accept only files matched by one or more unique file type specifiers. Applies to drag & drop and selecting folders. Emits `rejected` event when some files do not pass through to make it possible to notify user and deliver better user experience.
`flat`	boolean	false
Removes box shadow when using a variant with elevation.
`focused`	boolean	false
Forces a focused state styling on the component.
`glow`	boolean	false
Makes prepend/append icons full opacity when the field is focused and apply color.
`hide-details`	boolean \| 'auto'	false
Hides hint and validation errors. When set to `auto` messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.
`hide-input`	boolean	false
Display the icon only without the input (file names).
`hide-spin-buttons`	boolean	false
Hides spin buttons on the input when type is set to `number`.
`hint`	string	undefined
Displays hint text below the input when focused. Force this always open with the persistent-hint property.
`icon-color`	string \| boolean	false
Sets the color of the prepend/append icons.
`id`	string	undefined
Sets the DOM id on the component.
`indent-details`	boolean	null
Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls.
`label`	string	undefined
Sets the text of the v-label or v-field-label component.
`loading`	string \| boolean	false
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.
`max-errors`	string \| number	1
Control the maximum number of shown errors from validation.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`messages`	string \| string[]	[]
Displays a list of messages or a single message if using a string.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	File \| File[]	null
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Adds the multiple attribute to the input, allowing multiple file selections.
`name`	string	undefined
Sets the component’s name attribute.
`persistent-clear`	boolean	false
Always show the clearable icon when the input is dirty (By default it only shows on hover).
`persistent-hint`	boolean	false
Forces hint to always be visible.
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$file'
Prepends an icon to the component, uses the same syntax as `v-icon`.
`prepend-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component in the prepend-inner slot.
`readonly`	boolean	null
Puts input in readonly state.
`reverse`	boolean	false
Reverses the orientation.
`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.
`rules`	( \| string \| boolean \| PromiseLike<ValidationResult> \| ((value: any) => string \| false \| true) \| ((value: any) => PromiseLike<ValidationResult>) \| [string, any, string] )[]	[]
Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.
`show-size`	boolean \| 1000 \| 1024	false
Sets the displayed size of selected file(s). When using true will default to 1000 displaying (kB, MB, GB) while 1024 will display (KiB, MiB, GiB).
`single-line`	boolean	false
Label does not move on focus/dirty.
`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.
`truncate-length` New in v3.10.0	string \| number	22
The length of a filename before it is truncated with ellipsis.
`validate-on`	\| 'eager' \| 'lazy' \| 'blur' \| 'input' \| 'submit' \| 'invalid-input' \| 'blur lazy' \| 'input lazy' \| 'submit lazy' \| 'invalid-input lazy' \| 'blur eager' \| 'input eager' \| 'submit eager' \| 'invalid-input eager' \| 'lazy blur' \| 'lazy input' \| 'lazy submit' \| 'lazy invalid-input' \| 'eager blur' \| 'eager input' \| 'eager submit' \| 'eager invalid-input'	undefined
Change what type of event triggers validation to run.
`validation-value`	any	undefined
The value used when applying validation rules.
`variant`	\| 'outlined' \| 'plain' \| 'filled' \| 'underlined' \| 'solo' \| 'solo-inverted' \| 'solo-filled'	'filled'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:append`	[MouseEvent]
Emitted when appended icon is clicked.
`click:appendInner`	[MouseEvent]
Emitted when appended inner icon is clicked.
`click:clear`	[MouseEvent]
Emitted when clearable icon clicked.
`click:control`	[MouseEvent]
MISSING DESCRIPTION (edit in github)
`click:prepend`	[MouseEvent]
Emitted when prepended icon is clicked.
`click:prependInner`	[MouseEvent]
Emitted when prepended inner icon is clicked.
`mousedown:control`	[MouseEvent]
Event that is emitted when using mousedown on the main control area.
`rejected`	[File[]]
Emitted when some of the files from user input, drop or folder selection did not pass through `strict-accept` filter.
`update:focused`	[boolean]
Emitted when the input is focused or blurred
`update:modelValue`	[File \| File[]]
Event that is emitted when the component’s model changes.

Slots

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
} & { props: Record<string, any> }

never

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
} & {
  props: Record<string, unknown> & { class: any }
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
}

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
} & { label: string; props: Record<string, any> }

{ color: string; isActive: boolean }

{ message: string }

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
}

{
  fileNames: string[]
  totalBytes: number
  totalBytesReadable: string
}

`append`
Adds an item inside the input and after input content.
`append-inner`
Slot that is appended to the input.
`clear`
Slot for custom clear icon (displayed when the clearable prop is equal to true).
`counter`
Slot for the input’s counter text.
`default`
The default Vue slot.
`details`
Slot for custom input details to modifying the display of messages.
`label`
The default slot of the v-label or v-field-label component.
`loader`
Slot for custom loader (displayed when loading prop is equal to true).
`message`
Slot used to customize the message content.
`prepend`
Adds an item outside the input and before input content.
`prepend-inner`
Slot that is prepended to the input.
`selection`
Slot for defining a custom appearance for selected item(s). Provides the current index, text (truncated) and file.

Exposed

HTMLElement

string[]

string

boolean

() => Promise<void>

() => Promise<void>

(silent: boolean) => Promise<string[]>

`controlRef`
Reference to the control element of the field.
`errorMessages`
An array of error messages that were set by the `setErrors` method.
`fieldIconColor`
The color of the icon.
`isValid`
Boolean indicating if the input is valid.
`reset`
Resets the input value.
`resetValidation`
Resets validation of the input without modifying its value.
`validate`
Validates the input’s value.

SASS Variables

name	default
`$file-input-chip-margin-inline-end`	null
`$file-input-chips-margin-bottom`	null
`$file-input-chips-margin-top`	null

#VFileInput API

VFileInput API