Skip to content

FileInput Component

A comprehensive file input component with drag-and-drop support, file validation, and customizable display.

Overview

The FileInput component provides:

  • File selection via traditional file dialog or drag-and-drop
  • Support for single or multiple file selection
  • File validation (size, type, count)
  • Customizable display of selected files
  • Chip-based file display option

When to Use

Use the FileInput component when you need to:

  • Allow users to upload files in your application
  • Validate files before submission
  • Provide a modern, user-friendly file upload experience
  • Display selected files with options to remove them

Key Features

  • Multiple Selection Modes: Choose between single or multiple file selection
  • Drag and Drop: Users can drag files directly onto the component
  • File Validation: Set maximum file size and count constraints
  • File Type Filtering: Restrict uploads to specific file types
  • Chip Display: Option to show selected files as removable chips
  • Customizable: Extensive slot system for custom styling

API Reference →

View Code →