BbDropzone

Props

Name	Type	Default	Description
`accept`	`string[] \| undefined`	-	Array of MIME types (`'image/png'`), wildcards (`'image/*'`), extensions (`'.png'`) or bare tokens (`'png'`) to filter selectable files. A bare token upgrades to its extension instantly and is enriched with its MIME type from the lazily-imported `mime` database; validation of files that arrive before the database resolves is queued until the rules are complete. Validated on picker and drop paths. Pair a MIME type with its extension when the operating system may leave `file.type` empty. See example
`autofocus`	`Booleanish \| undefined`	-	Sets autofocus on page load.
`disabled`	`boolean \| undefined`	`false`	Disables the component Use while an application-owned upload is active so the selection cannot change mid-request. There is no `loading` or `readonly` state. See example
`errors`	`string \| string[] \| undefined`	-	Can be a string or an array of string containing the messages to display. They render in an `aria-live="polite"` region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the control's `aria-describedby`, so the reason the field is invalid is re-read whenever the control regains focus. Does not fill itself from `@error`. Map the typed rejection to application copy and pass the message back for contextual announcement. See example
`hasErrors`	`boolean \| undefined`	`false`	Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.
`hasWarnings`	`boolean \| undefined`	`false`	Define if the component should be in a warning state. Same chrome as errors with `--bb-warn`; errors take priority.
`id`	`string \| undefined`	-	The identifier of the component.
`maxFiles`	`number \| undefined`	-	Maximum number of acceptable files. Caps the existing and incoming selection together, and only applies in multiple mode. See example
`maxSize`	`number \| undefined`	-	Max size of the files in bytes. A per-file limit in bytes. Rejected files never enter the model. See example
`modelValue`required	`File \| File[] \| null`	-	Used by v-model.
`multiple`	`boolean \| undefined`	`false`	Allows the selection of multiple items. Changes both behavior and model shape: single mode replaces `File \| null`; multiple mode appends to a seeded `File[]`. See example
`name`	`string \| undefined`	-	Defines the name of the input. Required only for a native multipart post. In v3 the hidden submittable input is absent when `name` is unset; v2 rendered it unconditionally. See example
`pt`	`PtMap<BbDropzonePtPart, BbDropzonePtState> \| undefined`	-	Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
`pt:content`	`PtValue \| undefined`	-
`pt:content:active`	`PtValue \| undefined`	-
`pt:content:disabled`	`PtValue \| undefined`	-
`pt:content:errors`	`PtValue \| undefined`	-
`pt:content:warnings`	`PtValue \| undefined`	-
`pt:message`	`PtValue \| undefined`	-
`pt:message:active`	`PtValue \| undefined`	-
`pt:message:disabled`	`PtValue \| undefined`	-
`pt:message:errors`	`PtValue \| undefined`	-
`pt:message:warnings`	`PtValue \| undefined`	-
`pt:root`	`PtValue \| undefined`	-
`pt:root:active`	`PtValue \| undefined`	-
`pt:root:disabled`	`PtValue \| undefined`	-
`pt:root:errors`	`PtValue \| undefined`	-
`pt:root:warnings`	`PtValue \| undefined`	-
`tag`	`LayoutTag \| undefined`	`"div"`	Element rendered as the component's wrapper.
`warnings`	`string \| string[] \| undefined`	-	Warning messages to display beneath the dropzone, in their own `aria-live` region and amber (`--bb-text-warn`). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's `aria-describedby`, after any errors and before the description/hint.

v-model

Values kept in sync through v-model.

Name	Type	Description
`modelValue`	`File \| File[] \| null`	Contains validated files only. Upload progress, cancellation, retry, and server errors remain application-owned state. See example

Events

Name	Type	Description
`blur`	`(event: "blur", event: FocusEvent): void`
`error`	`(event: "error", data: DropZoneError): void`	Emits once per rejected file with a discriminated `DropZoneError`; it never mutates the model or writes a message for the user. See example
`focus`	`(event: "focus", event: FocusEvent): void`
`update:modelValue`	`(event: "update:modelValue", value: File \| File[] \| null): void`

Slots

The listed properties are the ones exposed to the slot scope.

Name Type Description

Name	Type	Description
`default`	`BbDropzoneDefaultSlotProps`	The drop zone area content. Renders inside the `<label>` that captures drag and file input events. It is a region, not a label: its text does not name the input unless you mark one node with the `labelId` slot prop. The visible drop surface. Put `labelId` on its headline only; a wrapper would pull hints, buttons, and filenames into the accessible name. See example

default

BbDropzoneDefaultSlotProps

The drop zone area content. Renders inside the <label> that captures drag and file input events. It is a region, not a label: its text does not name the input unless you mark one node with the labelId slot prop.

The visible drop surface. Put labelId on its headline only; a wrapper would pull hints, buttons, and filenames into the accessible name.

See example

Changes from v2

Props removed or renamed in 3.0. If you are coming from v2, the answer is here.

hasWarninghasWarningsfails silently