FileInput

Drop it like it's hot.

Example

Props

🕹️ standard props
files
File[]
The selected files
undefined
placeholder
string
Placeholder text for the input
undefined
persistOverUpload
boolean
Whether new files are added to the existing ones
true
disabled
boolean
Disables the file input
false
maxFiles
number
Maximum number of files that can be selected
undefined
class
string
Additional CSS classes
''
🎨 style props
--file-input-height
size
Height of the file input
64px
--file-input-width
size
Width of the file input
--file-input-background-color
color
Background color of the file input
rgb(var(--global-color-background-300))
--file-input-color
color
Text color inside the file input
rgb(var(--global-color-contrast-900))
--file-input-focus-shadow
shadow
Shadow effect on focus
inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)
--file-input-border-radius
size
Border radius of the file input
5px
--file-input-active-background-color
color
Background color when active
rgb(var(--global-color-primary-700))

Slots

bodySnippet

Custom content for the file drop area

Default content:

<span> { placeholder || 'Drop file here or click to upload'}</span>

Available variables:

Name	Type	Description
active	boolean	Indicates if the drop area is active

Events

onfileDrop

Triggered when files are dropped

Attribute	Type	Description
nativeEvent	DragEvent	The native drag event
files	File[]	Dropped files

onfileSelect

Triggered when files are selected via the file input

Attribute	Type	Description
nativeEvent	Event	The native input event
files	File[]	Selected files

onchange
Triggered when the file selection changes