Form controls

FileInput

A click-or-drop upload zone wrapping a hidden native file input. Reports drag-over state visually, accepts the same MIME / extension filters as the native input, and stays keyboard-accessible.

Basic

Avatar

Choose a file or drop it here

images

PNG or JPG, up to 1 MB.

Multiple files

Choose files or drop them here

CSV or JSON

Up to 10 files.

The drop target names the accepted types in a short line. Each entry of the accept list folds to the name a reader knows the format by, duplicates collapse, and the names join with "or", so .csv,.json,application/json reads "CSV or JSON" and image/* reads "images". A vendor type with no short form stays as written. The input's accept attribute keeps the list as given.

Error state

Choose a file or drop it here

Pick at least one file.

From the keyboard

Tab reaches the hidden input, and the drop target closes its dashes into a solid line, in the focus color unless the field is in error, so a keyboard user sees where focus is. A click opens the file picker and leaves the dashes as they are.

API

Prop	Type	Default	Description
`label`	`string`	no default	Field label rendered above the dropzone.
`accept`	`string`	no default	Native accept filter (MIME types or extensions).
`multiple`	`boolean`	`false`	Accept more than one file.
`disabled`	`boolean`	`false`	Disable the dropzone.
`hint`	`string`	no default	Help text shown below the dropzone.
`error`	`string`	no default	Error message. Reddens the border.
`id`	`string`	no default	DOM id of the underlying input.
`name`	`string`	no default	Native form name.
`onchange`	`(files: FileList \| null) => void`	no default	Fires on click-and-pick or drag-and-drop.
`class`	`string`	no default	Extra classes on the wrapper.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.