File Dropzone
Accessible drag-and-drop file input with loading and selected-file states.
When To Use
- Use File Dropzone when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
accept, multiple, disabled, loading, loadingText, label
Key exports
FileDropzone, formatFileSize
Example Code
import { FileDropzone } from "@hilum/ui"
const [files, setFiles] = React.useState([])
<FileDropzone
accept="image/*"
multiple
selectedFiles={files}
onFilesSelected={setFiles}
description="PNG, JPG, or WebP up to 10 MB each."
/>Input
Selected files
Tracks selected files and summarizes the upload batch.
States
Loading and disabled
Communicates unavailable upload states without changing layout.