> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-file.md).

# Input File

The Avonni File Input component allows users to upload one or multiple files directly within a screen flow. It supports accepted file type restrictions, validation rules, and standard input states such as required and disabled.

## Overview

Add the File Input component to a screen to let users attach files before submitting a flow. You can restrict which file types are accepted, allow single or multiple file selection, and enforce required-field validation with custom error messages.

## Configuration

To configure the File Input, select it on the canvas. The **Edit File Input** panel opens on the right. The sections below mirror the configuration panel from top to bottom.

### Properties

#### Label

The text label displayed above the file input field.

#### Variant

Controls how the label is displayed relative to the input.

| Option                 | Description                                              |
| ---------------------- | -------------------------------------------------------- |
| **Standard** (default) | Label appears above the input.                           |
| **Label Hidden**       | Label is hidden from view.                               |
| **Label Inline**       | Label appears to the left of the input on the same line. |
| **Label Stacked**      | Label starts above and shifts when the field is active.  |

#### Multiple

When enabled, users can select more than one file at a time.

#### Accepted Formats

Restricts which file types the input accepts. Enter one or more file extensions or MIME types separated by commas (for example: `.jpg, .png, .pdf`).

#### Required

When enabled, the user must select a file before the flow can proceed.

#### Message When Value Missing

Custom error message shown when a required file has not been provided. Requires **Required** to be enabled.

#### Disabled

When enabled, the input is disabled and users cannot interact with it.

#### Message When Bad Input

Custom error message displayed when an invalid file is detected. Available under advanced options.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the File Input. Configure them from the **Interactions** tab of the Edit File Input panel.

### Change

Fires when the user selects or changes the selected file(s). The **files** output variable is populated with the selected files and can be used to drive subsequent flow logic.

## Output Variables

The File Input exposes this output variable you can reference elsewhere on the page after the user interacts with it.

### File Selection

Updates when the user selects or changes the file(s) in the input.

| Output variable | Type            | What it returns                                                                                                        |
| --------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Files**       | Text Collection | The list of selected file names. Populated when the user picks one or more files and the **Change** interaction fires. |

> **Example:** After a user selects a résumé, use **Files** to display the chosen file names in a text component or pass them to a flow variable for downstream processing.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/input-file.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.