StellarUI

<stellar-dropzone>

Drag-and-drop file picker with keyboard activation, browse fallback, selected-file summary, and native multipart form participation.

Properties

Preview

Markup

Copy

<stellar-dropzone
  label="Upload receipt"
  description="PDF, PNG, or JPG up to 10MB."
  icon="mdi:tray-arrow-up"
  accept=".pdf,image/png,image/jpeg"
  name="receipt"
>
</stellar-dropzone>

API

Complete props, events, slots, and implementation notes for the shipped dropzone.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`solid \| outline \| dash \| soft \| ghost \| link`	`dash`
`accept`	`string`	`''`
`description`	`string`	`Drag files here or click to browse from your device.`
`disabled`	`boolean`	`false`
`icon`	`string`	`mdi:tray-arrow-up`
`label`	`string`	`Drop files here`
`multiple`	`boolean`	`false`
`name`	`string`	`''`

Events

Event	Source	Notes
`input`	host	Fires after a successful picker selection, drop, or host `clear()` call.
`change`	host	Fires alongside `input` after the selected files change.

Slots

Slot	Notes
`default`	Replaces the full fallback surface content inside the drop target.
`illustration`	Overrides the default upload icon above the fallback text.

Notes

The public tag is `stellar-dropzone`, shipped as a StellarUI-native companion to `stellar-file-input` rather than a reference port.
The shipped API stays small: `tone`, `appearance`, `label`, `description`, `icon`, `accept`, `name`, `disabled`, and `multiple`.
It uses one native `<input type="file">`, so picker selection and drag-and-drop use the same submitted files list.
Selected files participate in an ancestor native multipart form.
The host exposes `files`, `open()`, and `clear()` for imperative integrations without adding a separate controller element.
`appearance` uses the same contract as `stellar-button`, with `dash` as the default upload treatment.
`tone` colors the drop target surface, icon, and drag state with the same palette used across the rest of the component set.
`accept` filters both picker selection and dropped files, and rejected drops leave an existing valid selection intact.
`icon` gives the common case a prop-first path, while the `illustration` slot remains available for custom authored content.