Dropzone

Use bo-dropzone when clicking or dragging files into a larger target is useful. Use File Input for a compact control.

Usage

Upload documentsPDF files up to 5 MB

No files selected

<bo-dropzone>
  v-model="files"
  label="Upload documents"
  description="PDF files up to 5 MB"
  accept=".pdf"
  multiple
  :max-files="3"
/>

Validation

Use accept, max-files, and max-size for early client-side feedback. max-size is measured in bytes.

Images

<bo-dropzone label="Images" accept="image/*" :max-size="5242880" />

API

Prop / event	Type	Default	Description
id / dataTestId	string	autogenerated	Root attributes.
modelValue	File | File[] | null	null	Selected file value used by v-model.
name	string	-	Native form name.
accept	string	-	Accepted MIME types or extensions.
multiple	boolean	false	Allows multiple files.
maxFiles / maxSize	number	-	Count and byte limits.
label / description	string	-	Prompt and supporting text.
error / hint	string	-	Validation or supporting text.
required / disabled	boolean	false	Native control states.
ariaLabel	string	-	Accessible name for the file input.
update:modelValue	event	-	Emitted when selected files change.
change	(files: File[]) event	-	Emitted after a selection or removal.
error	(message: string) event	-	Emitted when selection validation fails.