Use File Input...
- For uploading one or more files.
- When space on a page is limited.
- The upload functionality is not the primary action on a view/page.
Don't use File Input...
- For most use cases. Use File Dropzone instead as this provides the affordance of drag and drop.
- To show the progress of uploading. Use File Tile instead.
Default
File Input is built upon the native HTML <input type="file"> element, so it can accept all of the native input’s events and attributes, including onChange to get the contents of the uploaded file, or multiple to let the user select multiple files.
The File Input Label sub-component is the visible part, since we hide the native <input> and only show this <label>. For accessibility, it must have accessible text, such as visible HTML text, visually-hidden text, alt text on an image, or an aria-label.
ShareInside of a Form
Since it is a form element, File Input can be used inside a Standard Form along with a separate, external label and/or helper text. Helper text should display upload criteria such as accepted file formats and maximum file size.
The preview has been updated.
Button Variants
File Upload Label is a <label>, but it accepts many of the visual props from Button. You can use these to customize the appearance of the label.
Available props are skin, sizeVariant, size, widthVariant, width, specialVariant, iconPosition, and buttonShape.
The preview has been updated.
Disabled
Use disabled when a File Input's action is unavailable.
The preview has been updated.