🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

File Input

View in Pattern Lab

HTML Markup

<section class="hoo-input-file">
    <label class="hoo-infile-label" name="file-upload" tabIndex="-1" for="file-upload-28" draggable="true">
        <div class="hoo-infile-icon"><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-arrow-upload-filled" aria-hidden="true">
                <title>Upload</title>
                <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-upload-filled">
                </use>
            </svg></span>
    </div>
    <div>Click or drag and drop files here to upload filed
        <p class="hoo-infile-description">Max file size: 10MB, Types: jpg, png, pdf</p>
    </div>
</label>
<input type="file" id="file-upload-28" name="" class="hoo-infile-context" multiple aria-describedby="file-upload-28-content" />
<output class="hoo-infile-output" id="NaN-content" aria-live="polite" title="Current selection">
</output>
</section>

File Input

An input component that allows users to upload files from their device.

Overview

File inputs enable users to select and upload files from their device to a web application. The HTWOO file input provides a styled interface for this functionality, improving upon the default browser implementation.

Usage

File inputs should be used when:

  • Users need to upload documents, images, or other files
  • File selection from the local device is required
  • The application needs to process or store user-provided files

Attributes

  • accept - Specifies file types that can be selected (e.g., .jpg,.png,.pdf)
  • multiple - Allows selection of multiple files when present
  • required - Makes file selection mandatory

States

  • Default - Normal state
  • Focus - When the input has keyboard focus
  • Disabled - When the input cannot be interacted with
  • File Selected - When one or more files have been selected

SCSS

Component Import

SCSS Partial Location

CSS Classes

  • .hoo-file-input - Container for the file input components
  • .hoo-file-input-field - The native file input (often visually hidden)
  • .hoo-file-input-label - The styled button for file selection
  • .hoo-file-input-text - Text showing the selected filename or status

Accessibility

  • Use descriptive button text for the file selection action
  • Ensure keyboard navigation works correctly
  • Provide clear feedback when files are selected
  • When disabled, include aria-disabled="true"
  • Consider including file type restrictions in visible text