FileInput

A file input component for selecting files with pixel-art styling.

?

Name	Category	Description	Type	Default
color	? Style	File input color, accepts preset theme colors or custom hex values	'primary' | 'success' | 'warning' | 'danger' | 'info' | string	—
ghost	? Style	Whether to use ghost style (no border/shadow at rest, visible on hover)	boolean	false
size	? Size	Size	'large' | 'default' | 'small'	'default'
disabled	? State	Whether disabled	boolean	false
clearable	? Behavior	Whether clearable	boolean	false
accept	? Behavior	Native accept attribute, restricts file types	string	—
multiple	? Behavior	Whether to allow multiple files	boolean	false
form	? Behavior	Native form attribute, associates with a form	string	—
model-value / v-model	? Content	Binding value	FileList | null	—
placeholder	? Content	Placeholder text when no file is selected	string	'No file chosen'
change	? Event	Triggered when file selection changes	(value: FileList | null) => void	—
clear	? Event	Triggered on clear	() => void	—
trigger	? Slot	Custom trigger button content		—
ref	? Expose	Native file input HTML element	Ref<HTMLInputElement>	—
open	? Expose	Open the file selection dialog	() => void	—
clear	? Expose	Clear selected files	() => void	—

Basic Usage

Basic usage of the file input component.

<template>
  <div class="demo-file-input">
    <px-file-input placeholder="Select a file..." />
  </div>
</template>

<style scoped>
.demo-file-input {
  max-width: 400px;
}
</style>

File Input Colors

Use the color prop to apply preset theme colors to the file input border and shadow.

<template>
  <div class="demo-file-input">
    <px-file-input color="primary" placeholder="Primary" />
    <px-file-input color="success" placeholder="Success" />
    <px-file-input color="warning" placeholder="Warning" />
    <px-file-input color="danger" placeholder="Danger" />
    <px-file-input color="info" placeholder="Info" />
  </div>
</template>

<style scoped>
.demo-file-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}
</style>

Custom Colors

Pass any hex color string to the color prop for fully custom colored file inputs.

<template>
  <div class="demo-file-input">
    <px-file-input color="#626aef" placeholder="Indigo" />
    <px-file-input color="#f59e0b" placeholder="Amber" />
    <px-file-input color="#ec4899" placeholder="Pink" />
  </div>
</template>

<style scoped>
.demo-file-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}
</style>

Ghost Style

Use the ghost prop to create borderless file inputs that reveal their border and shadow on hover. Works with both preset and custom colors.

<template>
  <div class="demo-file-input">
    <px-file-input ghost placeholder="Ghost" />
    <px-file-input ghost color="primary" placeholder="Ghost Primary" />
    <px-file-input ghost color="danger" placeholder="Ghost Danger" />
    <px-file-input ghost color="#626aef" placeholder="Ghost Custom" />
  </div>
</template>

<style scoped>
.demo-file-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}
</style>

Different Sizes

Use size property to set the file input size.

<template>
  <div class="demo-file-input">
    <px-file-input size="large" placeholder="Large" />
    <px-file-input placeholder="Default" />
    <px-file-input size="small" placeholder="Small" />
  </div>
</template>

<style scoped>
.demo-file-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}
</style>

Disabled

Use disabled property to disable the file input.

<template>
  <div class="demo-file-input">
    <px-file-input disabled placeholder="Disabled file input" />
  </div>
</template>

<style scoped>
.demo-file-input {
  max-width: 400px;
}
</style>

Clearable

Use clearable property to enable the clear button after a file is selected.

<template>
  <div class="demo-file-input">
    <px-file-input clearable placeholder="Select and clear" />
  </div>
</template>

<style scoped>
.demo-file-input {
  max-width: 400px;
}
</style>

Multiple Files

Use multiple property to allow selecting multiple files.

<template>
  <div class="demo-file-input">
    <px-file-input multiple clearable placeholder="Select multiple files" />
  </div>
</template>

<style scoped>
.demo-file-input {
  max-width: 400px;
}
</style>

Accept Filter

Use accept property to restrict file types.

<template>
  <div class="demo-file-input">
    <px-file-input accept="image/*" placeholder="Images only" />
    <px-file-input accept=".pdf" placeholder="PDF files only" />
    <px-file-input accept=".jpg,.png,.gif" placeholder=".jpg, .png, .gif" />
  </div>
</template>

<style scoped>
.demo-file-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}
</style>