components icon

File Input

File input is an interactive field that allows users to select files. It’s commonly used in form patterns.

Component status

PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Web Components
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

File input is a new, standalone component. In v1, file input was grouped with the inputs component. This component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements.

Anatomy

Diagram of the different parts of file input, marked 1 through 4.

File input contains four elements:

  1. Label: describes the purpose of the file.
  2. Helper text: describes the file format and size guidelines.
  3. Button: launches the file selector.
  4. File: shows the name, size, and status with the option to dismiss.