Form input

File input

Return File data directly without mixing selection with upload transport or queue state.

Assets

Playground

Configure the component and copy synchronized Vue code.

Assets

Properties

Multiple

Show size

Clearable

Actions slot

Vue

<m-file-input
  v-model="files"
  accept="image/*"
  show-size
  clearable
  label="Assets"
>
</m-file-input>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MFileInput · All30 tokens

md-file-input

md-field-container-gapg($t, 'container.gap')

Resolved value4rem

md-field-container-padding-inlineg($t, 'container.padding.inline')

Resolved value16rem

md-field-container-padding-prependg($t, 'container.padding.prepend')

Resolved value12rem

md-field-container-padding-appendg($t, 'container.padding.append')

Resolved value12rem

md-field-container-field-gapg($t, 'container.field.gap')

Resolved value8rem

md-field-label-leftg($t, 'label.left')

Resolved value16rem

md-field-label-prepend-leftg($t, 'label.prepend.left')

Resolved value52rem

md-field-label-prepend-notch-shiftg($t, 'label.prepend.notch.shift')

Resolved valuecalc(var(--ui-text-field-inset) - 52rem)

md-field-helper-padding-inlineg($t, 'helper.padding.inline')

Resolved value16rem

md-field-helper-margin-topg($t, 'helper.margin.top')

Resolved value4rem

md-file-input-actions-gapg($t, 'actions-gap')

Resolved value4rem

md-file-input-selection-margin-topg($t, 'selection-margin-top')

Resolved value8rem

md-field-label-colorg($t, 'label.color')

System token--md-sys-color-on-surface-variant

md-field-input-colorg($t, 'input.color')

System token--md-sys-color-on-surface

md-field-icon-colorg($t, 'icon.color')

System token--md-sys-color-on-surface-variant

md-field-helper-colorg($t, 'helper.color')

System token--md-sys-color-on-surface-variant

md-file-input-selection-colorg($t, 'selection-color')

System token--md-sys-color-on-surface-variant

MFileInput API

Props, slots, and events are generated from the current public kit contract.

MFileInput

Field family

src/runtime/components/ui/file-input

Props

NameTypeDefault

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

readonly

booleanfalse

variant

'filled' | 'outlined' | 'underline''filled'

rounded

'sharp' | 'small' | 'medium' | 'large' | 'pill''small'

labelPlacement

'top' | 'float' | 'inset' | 'hidden''float'

path

stringundefined

name

stringundefined

label

stringundefined

placeholder

stringundefined

helperText

stringundefined

error

booleanfalse

errorMessage

stringundefined

required

booleanfalse

autofocus

booleanfalse

autocomplete

stringundefined

accept

stringundefined

multiple

booleanfalse

capture

boolean | 'user' | 'environment'undefined

maxFiles

numberundefined

maxSize

numberundefined

showSize

booleanfalse

clearable

booleantrue

Slots

Events

@rejectFileRejection

@clearvoid

@selectFile[]