Skip to main content

File input

File input allows users to attach one or multiple files.


Single File

Component Preview


Component Code

<div class="usa-form-group">
  <label class="usa-label" for="file-input-single">Input accepts a single file</label>
  <input id="file-input-single" class="usa-file-input" type="file" name="file-input-single" />
</div>

Specific File Types

Component Preview

Select PDF or TXT files

Component Code

<div class="usa-form-group">
  <label class="usa-label" for="file-input-specific">Input accepts only specific file types</label>
  <span class="usa-hint" id="file-input-specific-hint">Select PDF or TXT files</span>
  <input id="file-input-specific" class="usa-file-input" type="file" name="file-input-specific"
    aria-describedby="file-input-specific-hint" accept=".pdf,.txt" multiple="multiple" />
</div>

Image Files

Component Preview

Select image files

Component Code

<div class="usa-form-group">
  <label class="usa-label" for="file-input-images">Input accepts only image files</label>
  <span class="usa-hint" id="file-input-images-hint">Select image files</span>
  <input id="file-input-images" class="usa-file-input" type="file" name="file-input-images"
    aria-describedby="file-input-images-hint" accept="image/*" multiple="multiple" />
</div>

Multiple Files

Component Preview

Select one or more files

Component Code

<div class="usa-form-group">
  <label class="usa-label" for="file-input-multiple">Input accepts multiple files</label>
  <span class="usa-hint" id="file-input-multiple-hint">Select one or more files</span>
  <input id="file-input-multiple" class="usa-file-input" type="file" name="file-input-multiple"
    aria-describedby="file-input-multiple-hint" multiple="multiple" />
</div>

Error State

Component Preview

Select any valid file Display a helpful error message

Component Code

<div class="usa-form-group usa-form-group--error">
  <label class="usa-label usa-label--error" for="file-input-error">Input has an error</label>
  <span class="usa-hint" id="file-input-error-hint">Select any valid file</span>
  <span class="usa-error-message" id="file-input-error-alert">Display a helpful error message</span>
  <input id="file-input-error" class="usa-file-input" type="file" name="file-input-error"
    aria-describedby="file-input-error-hint file-input-error-alert" />
</div>


Guidance

When to use the file input component

Documents are required.
Use file input when a user needs to upload specific documents or files, like a tax form or a photo.

When to consider something else

Large document workflows.
If you expect users to upload large files or many files at once, consider a more robust document management approach.

Usability guidance

Allow multiple file formats.
When possible, accept multiple file formats so users aren't required to convert documents.
Prefer drag and drop.
The USWDS file input component supports drag and drop functionality out of the box, making it easy for users to add files.
Provide feedback when files are attached.
Show users a clear indication of what files are attached and provide a way to remove attached files.
Communicate file requirements clearly.
Use hint text to communicate file type and size requirements before users attempt an upload.

Accessibility guidance

Use a label for the input.
Every file input should have a visible label that clearly describes what file is needed.
Associate hint text with the input.
Use aria-describedby to associate hint text with the input so screen readers can convey the information.
Display error messages clearly.
When displaying error messages, make sure they are associated with the input using aria-describedby.

Using the file input component

Use the accept attribute to limit file types.
Use the accept attribute to specify what file types are allowed (e.g., accept=".pdf,.txt" or accept="image/*").
Use the multiple attribute to allow multiple files.
Add the multiple attribute to allow users to select more than one file at a time.

USWDS Documentation

For more guidance, view the USWDS File Input Component Documentation.

Looking for U.S. government information and services?
Visit USA.gov