<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Padding:</strong> Adjusted to 12px</li>
<li><strong>Status message:</strong> Adjusted to have a 2px border radius.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>File inputs allow users to upload files from their device as part of a task. They are essential for collecting documents, images, or other assets.</p>
<p>Use the file input to</p>
<ul>
<li>Upload documents, images, or other supported file types.</li>
<li>Collect attachments required for forms or submissions.</li>
<li>Let users replace or update existing files in a process.</li>
</ul>
<p>File inputs and text inputs are not used for the same purpose. Choosing the right component helps users provide the correct type of information efficiently and with less friction.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>File input</td>
<td>Use it when users need to upload a document or image, or provide information that cannot be typed (e.g., IDs, receipts, media, proof of something).</td>
</tr>
<tr>
<td><a href="/components/text-input/">Text input</a></td>
<td>Use it when users need to directly type the required information, such as names, descriptions, or short answers, without needing to provide a file.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The file input component contains four main elements.</p>
<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/v3/components/file-input/file-input-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/file-input/file-input-usage-form-submission.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/v3/components/file-input/file-input-usage-standalone-submission.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/v3/components/file-input/file-input-usage-errors.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/v3/components/file-input/file-input-kinds-helper-text.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/v3/components/file-input/file-input-kinds-tooltip.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/v3/components/file-input/file-input-size-large.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/v3/components/file-input/file-input-size-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

The file input component provides visual feedback to communicate the status of a selected file. These states help users understand when a file is ready to upload, when a process is in progress, and when an issue occurs. 

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/v3/components/file-input/file-input-interactions.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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                 | Collection | CSS var                                           | Preview    |
| ------------------------------------ | ---------- | ------------------------------------------------- | ---------- |
| file-input/file/gap                  | Component  | `var(--dds-file-input-file-gap)`                  | \-         |
| file-input/file/padding-horizontal   | Component  | `var(--dds-file-input-file-padding-horizontal)`   | \-         |
| file-input/file/padding-vertical     | Component  | `var(--dds-file-input-file-padding-vertical)`     | \-         |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                     | \-         |
| file-input/file/min-width            | Component  | `var(--dds-file-input-file-min-width)`            | \-         |
| color/background/ERROR/subtle-rest   | Semantic   | `var(--dds-color-background-error-subtle-rest)`   | \#FFECEE   |
| spacing/xs                           | Semantic   | `var(--dds-spacing-xs)`                           | \-         |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                         | \-         |
| color/text/ERROR/rest                | Semantic   | `var(--dds-color-text-error-rest)`                | \#BB2A33   |
| color/text/primary                   | Semantic   | `var(--dds-color-text-primary)`                   | \#1D2C3B   |
| color/text/secondary                 | Semantic   | `var(--dds-color-text-secondary)`                 | \#293B4D   |
| button/size/xs                       | Component  | `var(--dds-button-size-xs)`                       | \-         |
| border/width/xs                      | Semantic   | `var(--dds-border-width-xs)`                      | \-         |
| button/background/ghost-rest         | Component  | `var(--dds-button-background-ghost-rest)`         | \#40586D00 |
| color/text/NEUTRAL/rest              | Semantic   | `var(--dds-color-text-neutral-rest)`              | \#1D2C3B   |
| color/background/SURFACE/neutral     | Semantic   | `var(--dds-color-background-surface-neutral)`     | \#FFFFFF   |
| color/border/NEUTRAL/pale            | Semantic   | `var(--dds-color-border-neutral-pale)`            | \#C5D4E3   |
| color/background/SUCCESS/subtle-rest | Semantic   | `var(--dds-color-background-success-subtle-rest)` | \#E9F5CE   |
| color/text/SUCCESS/rest              | Semantic   | `var(--dds-color-text-success-rest)`              | \#436F00   |
| loading/size/sm                      | Component  | `var(--dds-loading-size-sm)`                      | \-         |
| color/background/SURFACE/secondary   | Semantic   | `var(--dds-color-background-surface-secondary)`   | \#EBF1F6   |
| color/background/BRAND/base-rest     | Semantic   | `var(--dds-color-background-brand-base-rest)`     | \#0672CB   |
| card/gap                             | Component  | `var(--dds-card-gap)`                             | \-         |
| card/padding                         | Component  | `var(--dds-card-padding)`                         | \-         |

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

Code

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

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

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

File Input