File Upload
Use the file upload component to let users select and upload files.
Default File Upload
The basic file upload uses the native file input with enhanced styling.
You can upload JPG, PNG or PDF files up to 5MB.
<div class="form-group">
<label class="form-label" for="file-upload">Upload a file</label>
<span class="form-hint">You can upload JPG, PNG or PDF files up to 5MB.</span>
<input class="file-upload-input" id="file-upload" type="file">
</div>With Accept Attribute
Specify accepted file types to help users select the correct files.
This must be a JPG or PNG file.
<input class="file-upload-input" type="file" accept=".jpg,.jpeg,.png">Multiple Files
You can select multiple files.
<input class="file-upload-input" type="file" multiple>Drag and Drop Zone
For a more interactive experience, use a drag and drop zone.
Choose files or drag and drop them here
JPG, PNG or PDF up to 10MB each
<div class="file-upload-dropzone">
<div class="file-upload-dropzone-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
</svg>
</div>
<p class="file-upload-dropzone-text">
<strong>Choose files</strong> or drag and drop them here
</p>
<p class="file-upload-dropzone-text">
JPG, PNG or PDF up to 10MB each
</p>
<input type="file" multiple accept=".jpg,.jpeg,.png,.pdf">
</div>Error State
The selected file must be smaller than 5MB
<div class="form-group form-group-error">
<label class="form-label" for="file-upload">Upload a file</label>
<span class="form-error-message">The selected file must be smaller than 5MB</span>
<input class="file-upload-input" id="file-upload" type="file">
</div>Usage Guidelines
Do
- Tell users what file types are accepted
- Tell users the maximum file size
- Provide clear error messages if upload fails
- Show upload progress for large files
- Allow users to remove uploaded files
Don't
- Don't auto-submit on file selection
- Don't accept files without validation
- Don't use drag and drop as the only option
Accessibility
- Always use a label associated with the input
- Provide hint text about file requirements
- Drag and drop zones should have a fallback input
- Error messages should be linked to the input
CSS Classes
/* Basic file input */
.file-upload-input { }
/* Drag and drop */
.file-upload-dropzone { }
.file-upload-dropzone-active { }
.file-upload-dropzone-icon { }
.file-upload-dropzone-text { }