File Input Element

The File Input element handles local file selection, allowing users to upload documents, images, and other media with precise size and count restrictions.

Live Preview

File Input Preview

Specifications

File inputs can be customized to handle various upload requirements:

  • File Types: Restrict selection using Accept filters for Images, Videos, PDFs, and more.
  • Sizing & Variants: Choose from Small, Medium, or Large heights and standard UI styles like Outline or Filled.
  • Validation: Set Max Size (MB) and Max Files to ensure submissions remain within your processing limits.
  • Multi-Select: Toggle the Multiple flag to allow users to upload several files at once.
  • Required: Mark the field as Required to prevent form submission without a valid file.
  • Styling: Apply custom layouts, borders, and shadows to the upload trigger button.

AI Guidance

How to prompt for File Inputs:

  • Add a file upload input that only accepts PDF documents.
  • Create a large outlined input for uploading multiple profile photos (max 5).
  • Insert a required file input for resume uploads restricted to 2MB.