<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Diagram of the different parts of file input, marked 1 through 4.","caption":"File input contains four elements:\n\n1. Label: describes the purpose of the file.\n2. Helper text: describes the file format and size guidelines.\n3. Button: launches the file selector.\n4. File: shows the name, size, and status with the option to dismiss.","url":"https://dds.dell.com/site/production/b6/ef/File_Input_Anatomy_870a2ff8eb.png"}]' data-numberofcolumns='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

File input uses a browse button to launch a file selector dialog. Refer to the [button component page](/components/button/) for more information on how to use buttons. While not a part of the file input component, a submit button is usually the final step for uploading a file.

Users can select multiple files at once, as long as page upload requirements are respected. Each selected file will be treated as unique in the file list. If a file is chosen more than once, it will appear as a duplicate in the list.

### Form submission

Most of the time, file input will be used in conjunction with a [form](/patterns/form/). This might be for the purpose of attaching supporting documentation in an e-commerce checkout flow, such as a PDF of a purchase agreement. It could also be used in a productivity application, such as a spreadsheet of business expenses.

<details data-name='image-block' data-images='[{"alt":"Example of file input in a form, with a button beneath the selected file, “Submit.”","caption":"In a form, file input uses a secondary button so as to not compete with the primary form submit button.","url":"https://dds.dell.com/site/production/b4/71/File_Input_Form_submission_a964468f2d.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Standalone submission

File input may occasionally have a use case as a standalone component. If it automatically uploads upon file selection (without a submit button) or brings users to another workflow (such as a modal used to crop or edit a profile picture), then it is critical to communicate these expectations up front for accessibility.

<details data-name='image-block' data-images='[{"alt":"Example of file input as a standalone component with button label, “Upload files.”","caption":"When using file input as a standalone component without a submit or upload button, the browse button may be a primary button.","url":"https://dds.dell.com/site/production/d1/b3/File_Input_Standalone_submission_8e52bbe27d.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Errors

Errors occur when an input entry fails validation. In that case, use an error message with an alert [icon](/foundations/icons/) to describe the error and how to fix it as clearly and succinctly as possible. 

There are two types of error messages: component and file. 

* Component-level error messages refer to an error affecting the submission success of a file input component.
* File-level error messages refer to issues with uploading specific files.

##### Avoiding errors

Providing visual cues and clear instructions can help prevent errors in form fields. Try using:

* clear labels placed close to their respective input field
*  instructional helper text emphasizing criteria
* asterisks to highlight required fields

<details data-name='image-block' data-images='[{"alt":"Image showing a file in error state, with alert messages for the component and specific file.","caption":"Error state with component error message and file error message.","url":"https://dds.dell.com/site/production/b5/99/File_Input_Errors_50572861a2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

Helper text allows users to understand the file input parameters before selecting a file. Parameters are likely to include guidance on individual file size, number of files that can be selected at the same time, number of files that can be selected total, and valid file types. 

Valid file types should be listed by their file extension, not program; for example, list “.XLSX” instead of “Excel”, as multiple file formats are supported in Excel.

<details data-name='image-block' data-images='[{"alt":"File input with default helper text above the button.","caption":"Default helper text: body text, to be used in most cases","url":"https://dds.dell.com/site/production/d6/4e/File_Input_Default_helper_text_3a472bd211.png"},{"alt":"File input with the cursor hovered over a tooltip to reveal helper text.","caption":"Tooltip helper text: use in smaller sizes to save on vertical space","url":"https://dds.dell.com/site/production/f9/22/File_Input_Tooltip_helper_text_e88d022117.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Sizes

The file input component is available in two sizes, large and small. On smaller screens, the file title is truncated in the middle so that the extension is always visible. A [tooltip](/components/tooltip/) will be applied to show the entire file name on hover. Error messages will wrap to a second line on smaller screens, similar to the [notification component](/components/notification/).

<details data-name='image-block' data-images='[{"alt":"Image of file input in size large.","caption":"Large file input component.","url":"https://dds.dell.com/site/production/77/1d/File_Input_S_Ize_Large_fc18301cda.png"},{"alt":"File input with the cursor hovered over a tooltip to reveal helper text.","caption":"Small file input component.","url":"https://dds.dell.com/site/production/0e/9c/File_Input_Size_Small_5c095df93e.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

A selected file can display a ready to submit state or an error state. Both states in the file list are dismissible. Error states will consist of an inline error message beneath the component and a file-level error message in the list.

If teams choose to enhance the behaviors of the component, designs for the base file states can be found in the Figma design panel. While not linked programmatically to the component, these states can be toggled to find designs for loading and success feedback, in addition to error and ready to submit states.

Button states, such as rest, hover, focus, inactive, and error, can be found in detail on the [button component page](/components/button/).

<details data-name='image-block' data-images='[{"alt":"File input in its four active states: “Loading”, “Success”, “Ready-to-submit”, and “Error.”","caption":"Dismissible ready to submit and error states with elective loading and success states.","url":"https://dds.dell.com/site/production/ef/85/File_Input_Behavior_and_states_df7665970c.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State           | Behavior                                                                                                                                                                             |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Ready to submit | A ready state will appear automatically with a white background after a file has been successfully selected and is able to be uploaded upon submission.                              |
| Error           | A file input will appear in an error state of Red 100 with an alert icon when selection was interrupted, an invalid file format or size was selected, or a technical issue occurred. |

## Standards

### Accessibility

#### **Make sure all helper text and error messages provide meaningful assistance in helping users avoid or fix errors**

Don’t provide unclear helper text, such as “Select a valid file format.” Instead, make it clear what a valid file format is.

[WCAG 2.2: 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html), [3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html)

#### **Inform the user of an automatic upload behavior**

Ensure a predictable experience for the user by informing them of uncommon patterns at the beginning. For example, a user with a cognitive difficulty may expect to review the file again before submitting to upload and may become confused when it uploads automatically after selection.

[WCAG 2.2: Understanding Success Criterion 3.2.2: On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html)

#### **Make sure all labels are clear, concise, and unique**

All users should know from the label exactly what information is needed to successfully complete the field or operation.

[WCAG 2.2: 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)

### Content

#### **List file limitations**

Clearly spell out accepted file types, file size, and quantity in the instructions. If users are shown an error, be specific about what caused the error and how to fix it.

**Do:** This file exceeds the 5 MB size limit. Select a smaller file to continue.\
**Don’t:** Invalid file

#### **Communicate expected outcome**

In general, files are not uploaded until after a form is submitted. Communicate file upload status accurately.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-file-input--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-file-input--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-file-input--basic)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-file-input--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-file-input--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-file-input--docs&viewMode=docs&websiteFrame=true'></details>

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

File Input

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
