Menu
Documentation
v4.0.0-beta.4

Input File

<BaseInputFile /> · A simple file upload input

View SourceOpen Issue
vue
<template>
  <BaseInputFile v-model="file" rounded="md" placeholder="Upload a file" />
</template>

<script setup lang="ts">
const file = ref<FileList | null>(null)
</script>

Features

  • Handles model binding
  • Color customization
  • Sizes and radius support

Anatomy

This component is self closing and can be used to create a file input. You can customize the input's visual style by using the available props.

vue
<template>
  <BaseInputFile />
</template>

API Reference

This component has props that you can use to modify its visual style and behavior.

Model Type
model-value
FileList | null
Prop Type
id
default:-
string

The form input identifier.

placeholder
default:-
string

The placeholder to display for the file input.

disabled
default:-
boolean

Whether the input is disabled.

multiple
default:-
boolean

Allows multiple files to be selected.

text-value
default:-
((fileList?: FileList | null) => string)

Method to return the text value of the file input.

variant
default:"default"
"default" | "primary" | "muted"

The variant of the input.

rounded
default:"md"
"none" | "md" | "sm" | "lg" | "full"

The radius of the file input.

size
default:"md"
"md" | "sm" | "lg" | "xl"

The size of the input.

classes
default:{}
{ root?: string | string[]; button?: string | string[]; text?: string | string[]; placeholder?: string | string[]; }

Optional classes to pass to the inner components.

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Default input variables */
  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);

  /* Muted input variables */
  --color-input-muted-border: var(--color-muted-300);
  --color-input-muted-bg: var(--color-muted-50);
  --color-input-muted-text: var(--color-muted-600);
  --color-input-muted-placeholder: var(--color-muted-300);
  --color-input-muted-button-bg: var(--color-muted-200);
  --color-input-muted-button-bg-active: var(--color-muted-300);
  --color-input-muted-button-text: var(--color-muted-700);
}

Examples

Sizes

Use the size prop to set the size of the input.

vue
<template>
  <BaseInputFile v-model="file" size="md" placeholder="Upload a file" />
</template>

<script setup lang="ts">
const file = ref<FileList | null>(null)
</script>

Border radius

Use the rounded prop to set the border radius of the input.

vue
<template>
  <BaseInputFile v-model="file" rounded="full" placeholder="Upload a file" />
</template>

<script setup lang="ts">
const file = ref<FileList | null>(null)
</script>

Input

Input Number