Github

File Input

File inputs allow users to select and upload one or more files.

Component variations

Layout

Contains two variants: horizontal and vertical. Horizontal is Compact inline layout — ideal for form fields with limited vertical space. Vertical is Large centered dropzone — ideal for prominent file upload areas. Horizontal is the default layout.

Optional

Click to uploador drag and drop

Please upload the supporting files: .PNG,.JPEF no more than 5 MB

Optional

Click to uploador drag and drop

Accepts: .PNG,.JPEg no more than 5 MB

Error State

Validation error styling applied to the dropzone and helper text.

Click to uploador drag and drop

File size exceeds the maximum allowed limit.

Disabled State

Interaction is prevented and the component is visually dimmed.

Click to uploador drag and drop

Without Label

The label row is omitted when no label, hint, or optional prop is provided.

Click to uploador drag and drop

Usage Guidelines

Import

Import the file-input component in your standalone component or module:

import-file-input.ts

Copy code

TypeScript Setup

Add the component to your imports and handle the filesChange output:

my.component.ts

Copy code

Basic Implementation

A minimal file input with label, supported types, and size constraint:

my.component.html

Copy code

Vertical Layout

Use layout="vertical" for a larger, more prominent dropzone:

my.component.html

Copy code

Error State

Set state="error" and provide a helperText for validation feedback:

my.component.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Field label displayed above the dropzone
hintText
string
-
No
Tooltip content shown on the help icon next to the label
optional
boolean
false
No
Displays an "Optional" indicator on the right of the label row
layout
'horizontal' | 'vertical'
'horizontal'
No
Layout variant. horizontal = compact inline; vertical = large centered dropzone
supportedFiles
string
-
No
list of supported file types
maxSize
string
-
No
Maximum file size label shown in the footer (e.g. "12 MB")
multiple
boolean
false
No
Whether multiple files can be selected at once
disabled
boolean
false
No
Disables the component; prevents interaction and dims the UI
state
'error' | null
null
No
Validation state. "error" applies error styling
helperText
string
-
No
Helper/validation message displayed below the dropzone
supportingText
string
-
No
Supporting text to show additional file size limit, file type etc

Outputs

Event emitters for file interaction:

Property
Type
Description
filesChange
EventEmitter<File[]>
Emitted whenever the selected file list changes — on selection (click or drag-and-drop) and on removal. Always emits the full current list.

Best Practices

When to Use

  • Use File Input when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using File Input when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always provide supportedFiles and maxSize so users know what is accepted before uploading
  • Use accept to restrict the native file picker to valid types
  • Use layout="horizontal" in forms and layout="vertical" as a primary upload area
  • Show error state with helperText explaining the issue (e.g. file too large, wrong type)
  • Use hintText for additional context the user might need before selecting a file
  • Use [multiple]="true" only when multi-file upload is intentionally supported
  • Handle the filesChange output to validate files before uploading
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the file input features in this section

Optional

Click to uploador drag and drop

example.html

Copy code