# FileInput

A built-in tag for a file picker that matches the rest of your form. It uses the same
Input wrapper as [TextInput](/components/inputs/textinput/), so it carries a label,
description, placeholder, and error message, and adds the file-specific options `accept`,
`multiple`, and `clearable`.

Use it as `{% fileinput %}` in Markdown, or call it from Python logic
(loops, snippets) via `component('aardvark', 'fileinput', …)`.

## Basic file picker

A labelled picker with a placeholder shown until a file is chosen.



<br>

Source: Markdown

```aardvark
{% fileinput label='Resume' placeholder='Choose a file' %}
```


Source: Python

```python
component('aardvark', 'fileinput', label='Resume', placeholder='Choose a file')
```



## Accept, multiple, and clearable

`accept` is the native accept-attribute string; `multiple` lets the picker take several
files; `clearable` shows a clear button once a file is chosen.



<br>

Source: Markdown

```aardvark
{% fileinput label='Images' accept='image/png,image/jpeg' multiple=true clearable=true placeholder='Pick one or more images' %}
```


Source: Python

```python
component(
    'aardvark', 'fileinput',
    label='Images',
    accept='image/png,image/jpeg',
    multiple=True,
    clearable=True,
    placeholder='Pick one or more images',
)
```



## Description, required, and error

The shared wrapper fields work as on the other inputs: `description` adds help text,
`required` (or `withAsterisk`) adds the asterisk, and `error` shows a validation message
and switches the field to the error color.



<br>

Source: Markdown

```aardvark
{% fileinput label='Contract' description='PDF only' accept='application/pdf' required=true error='A signed contract is required' %}
```


Source: Python

```python
component(
    'aardvark', 'fileinput',
    label='Contract',
    description='PDF only',
    accept='application/pdf',
    required=True,
    error='A signed contract is required',
)
```



## Variant, size, and radius

`variant` is `default`, `filled`, or `unstyled`; `size` and `radius` take `xs`–`xl`.





<br>

Source: Markdown

```aardvark
{% fileinput label='Filled' variant='filled' placeholder='filled variant' %}

{% fileinput label='Large + round' size='lg' radius='xl' placeholder='lg / xl radius' %}
```


Source: Python

```python
component('aardvark', 'fileinput', label='Filled', variant='filled', placeholder='filled variant')

component('aardvark', 'fileinput', label='Large + round', size='lg', radius='xl', placeholder='lg / xl radius')
```



## Sections and disabled

`leftSection` and `rightSection` put text inside the field; `disabled` renders it inert.





<br>

Source: Markdown

```aardvark
{% fileinput label='Attachment' leftSection='📎' placeholder='Add a file' %}

{% fileinput label='Locked' disabled=true placeholder='Upload disabled' %}
```


Source: Python

```python
component('aardvark', 'fileinput', label='Attachment', leftSection='📎', placeholder='Add a file')

component('aardvark', 'fileinput', label='Locked', disabled=True, placeholder='Upload disabled')
```



## With other components

Group a file picker with other fields inside a [fieldset](/components/inputs/fieldset/).










<br>

Source: Markdown

```aardvark
{% fieldset legend='Application' %}
{% textinput label='Full name' placeholder='Ada Lovelace' %}
{% fileinput label='Resume' accept='application/pdf' placeholder='Upload your resume' %}
{% endFieldset %}
```


Source: Python

```python
inner = (
    component('aardvark', 'textinput', label='Full name', placeholder='Ada Lovelace')
    + component('aardvark', 'fileinput', label='Resume', accept='application/pdf', placeholder='Upload your resume')
)
component('aardvark', 'fieldset', legend='Application', children=inner)
```



## Attributes

Omit any attribute to take its Mantine default.

| Attribute | Valid values | Description |
| --- | --- | --- |
| `label` | string | Label shown above the field. |
| `description` | string | Help text shown under the label. |
| `placeholder` | string | Placeholder shown until a file is chosen. |
| `error` | string | Validation message shown below the field; switches it to the error color. |
| `accept` | string | Native accept-attribute string, e.g. `image/png,image/jpeg` or `application/pdf`. |
| `multiple` | `true` / `false` | Allow selecting several files. Default `false`. |
| `clearable` | `true` / `false` | Show a clear button once a file is chosen. Default `false`. |
| `variant` | `default`, `filled`, `unstyled` | Visual style. |
| `size` | `xs`, `sm`, `md`, `lg`, `xl` | Field size. |
| `radius` | `xs`, `sm`, `md`, `lg`, `xl` (or any CSS value) | Corner radius. |
| `required` | `true` / `false` | Mark the field required and add the asterisk. Default `false`. |
| `withAsterisk` | `true` / `false` | Add the asterisk without the `required` semantics. Default `false`. |
| `disabled` | `true` / `false` | Render the field disabled. Default `false`. |
| `leftSection` | string | Text shown inside the field on the left. |
| `rightSection` | string | Text shown inside the field on the right. |

## CSS Selectors

Target a `{% fileinput %}` from your own CSS with the island data attribute or the Mantine Styles API part classes:


```css
/* Every FileInput instance on the page */
[data-aardvark-island="FileInput"] { }

/* Mantine Styles API parts */
.mantine-FileInput-root { }
.mantine-FileInput-input { }
.mantine-FileInput-placeholder { }
```


## Injecting Attributes

Pass `attr={…}` to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. Here it is wired to `onchange`, so choosing a file logs the selected file name to the console and alerts it:



<br>

Source: Markdown

```aardvark
{% fileinput label='Resume' placeholder='Choose a file' attr={'onchange': '''
const value = Array.from(event.target.files || []).map((file) => file.name).join(', ');
console.log('attr demo value:', value);
alert(value || 'No file selected');
'''} %}
```


Source: Python

```python
component('aardvark', 'fileinput', label='Resume', placeholder='Choose a file', attr={'onchange': '''
const value = Array.from(event.target.files || []).map((file) => file.name).join(', ');
console.log('attr demo value:', value);
alert(value || 'No file selected');
'''})
```