File Input

The catnip-input-file component provides a drag-and-drop upload field with an optional file list below the drop zone.

Overview

Use the file input when users need to select one or more files from their device or drop files into the page. The drop zone supports horizontal and vertical layouts, inline danger feedback, and all standard field affordances (label, supporting text, disabled state).

Compose uploaded files with catnip-file-item in the files slot — one row per file for progress, errors, and actions.

Layouts

Layout	Best for
horizontal (default)	Compact forms and inline fields
vertical	Prominent upload areas with a larger drop target

Drop zone states

Interaction states (hover, focus, pressed, drag-over) are handled automatically. Set intent="danger" to switch the drop zone to the inline file-type error presentation from the design spec.

Drop-zone copy defaults to bundled strings. Override individual lines with props or named slots (uploadLink, dragDrop, acceptHint, dragActive, errorTitle, errorHint) when you need localisation or custom markup.

Live example

Accessibility

• The drop zone is keyboard activatable (Enter / Space) and opens the native file picker.
• A visually hidden native <input type="file"> is associated with the field label via htmlFor / id.
• Custom aria-label overrides the auto-generated drop zone label when the default copy is not sufficient (especially when using custom drop-zone slots).

Related

• catnip-file-item — single file row used in the files slot.