File Upload

Default

<div class="elv-file-upload">
  <div class="elv-file-upload__zone" id="drop-zone">
    <span class="elv-file-upload__icon material-symbols-outlined">upload_file</span>
    <div class="elv-file-upload__text">
      <div class="elv-file-upload__primary">Drag and drop files here</div>
      <div class="elv-file-upload__secondary">or click to browse</div>
    </div>
    <button type="button" class="elv-file-upload__button">Browse files</button>
    <input type="file" class="elv-file-upload__input" multiple />
  </div>
  <div class="elv-file-upload__files" id="file-list"></div>
</div>

Single File Upload

<label class="elv-input-label">
  Upload Profile Picture <span class="elv-required">*</span>
</label>
<div class="elv-file-upload">
  <div class="elv-file-upload__zone">
    <!-- ... -->
    <input type="file" accept="image/*" required />
  </div>
</div>
<p class="elv-input-helper">Accepted formats: JPG, PNG, GIF (max 5MB)</p>

With File Type Restrictions

<input
  type="file"
  accept=".pdf,.doc,.docx"
  multiple
/>

Compact Variant

<div class="elv-file-upload elv-file-upload--compact">
  <!-- Smaller height, no button -->
</div>

States

<!-- Error State -->
<div class="elv-file-upload__zone elv-file-upload__zone--error">
  <!-- ... -->
</div>
<p class="elv-input-error" role="alert">Error message</p>

<!-- Disabled State -->
<div class="elv-file-upload__zone elv-file-upload__zone--disabled">
  <input type="file" disabled />
</div>

<!-- File List Item -->
<div class="elv-file-upload__file">
  <span class="material-symbols-outlined">description</span>
  <div class="elv-file-upload__file-info">
    <div class="elv-file-upload__file-name">filename.pdf</div>
    <div class="elv-file-upload__file-size">2.4 MB</div>
  </div>
  <button class="elv-file-upload__file-remove material-symbols-outlined">close</button>
</div>

<!-- File Error -->
<div class="elv-file-upload__file elv-file-upload__file--error">
  <!-- ... -->
</div>

Accessibility Notes

• Labels: Always pair upload zone with a visible label using for and id
• ARIA Labels: Include aria-label on hidden file input and remove buttons
• Keyboard Access: Click zone or press Enter/Space to trigger file dialog
• Focus Indicator: Visible outline on keyboard focus
• Error States: Use aria-invalid="true" and aria-describedby for error messages
• Screen Readers: File list updates are announced when files are added/removed
• Required Fields: Use required and aria-required="true"
• Helper Text: Clearly indicate accepted file types and size limits
• Remove Buttons: Include descriptive aria-label="Remove [filename]"

Design System Specs