File Input

Use bo-file-input for compact native file selection. It renders a native <input type="file">, displays selected file rows, validates accepted types and limits, and lets users remove selected files.

Basic Usage

The input starts empty. v-model is File | null for a single file and File[] for a multiple input. The browser controls how files are selected; the live examples become selected after you choose a file.

AttachmentsChoose a file to attach.

Choose a fileAny supported file typeBrowse

<bo-file-input label="Attachments" description="Choose a file to attach." />

Selected File

Bind v-model to observe the selected file. After a selection, the component renders the file name and a Remove action.

Selected file

Choose a file.pdf,.pngBrowse

Choose a PDF or PNG file.

<bo-file-input>
  v-model="selectedFile"
  label="Selected file"
  accept=".pdf,.png"
/>

Multiple Files

Set multiple to allow more than one file. maxFiles limits the number accepted by the selection composable and is measured in files.

AttachmentsUp to four PDF or PNG files

Choose files.pdf,.pngBrowse

No files selected.

<bo-file-input>
  v-model="multipleFiles"
  label="Attachments"
  description="Up to four PDF or PNG files"
  accept=".pdf,.png"
  multiple
  :max-files="4"
/>

Accepted Types

Pass the native accept value to limit the file picker. MIME types, extensions, and comma-separated combinations are supported by the browser.

Profile image

Choose a fileimage/*Browse

<bo-file-input>
  v-model="imageFile"
  label="Profile image"
  accept="image/*"
/>

Disabled, Full Width, and Error

Use disabled to prevent selection, fullWidth when the control should participate in a full-width form layout, and error to show a validation message. required adds the native required state and visual marker.

Disabled input

Choose a fileAny supported file typeBrowse

Required upload*

Choose a fileAny supported file typeBrowse

A project document is required.

<bo-file-input label="Disabled input" disabled />
<bo-file-input>
  label="Required upload"
  full-width
  required
  error="A project document is required."
/>

Limits and Validation

maxSize is measured in bytes. When a selection violates accept, maxFiles, or maxSize, the component displays the validation error and emits error. The error prop is useful for server-side or external validation.

Usage Guidance

• Always give a file input a visible label or an ariaLabel.
• Tell users which formats and size limits are accepted before they open the picker.
• Use multiple only when the receiving workflow can handle an array of files.
• Validate file content and permissions on the server as well as in the browser.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	Native input id.
dataTestId	string	Autogenerated	The test id attribute.
name	string	-	Native form field name.
accept	string	-	Accepted MIME types or file extensions.
multiple	boolean	false	Allows multiple files and returns an array.
maxFiles	number	-	Maximum number of files accepted.
maxSize	number	-	Maximum file size in bytes.
label	string	-	Visible input label.
description	string	-	Supporting text below the label.
error	string	-	External validation message.
hint	string	-	Supporting hint when there is no error.
required	boolean	false	Native required state.
disabled	boolean	false	Prevents file selection.
fullWidth	boolean	false	Full-width form layout option.
ariaLabel	HTMLAttributes['aria-label']	-	Accessible name when a visible label is not used.
modelValue	File | File[] | null	null	Selected file value used by v-model.

Events

Event	Payload	Description
update:modelValue	File | File[] | null	Emitted when the selection or removal changes.
change	File[]	Emitted after selection or removal.
error	string	Emitted when selection validation fails.

Exposed Methods

Method	Signature	Description
focus	() => void	Opens the native file picker.
reset	() => void	Clears selected files and the input.