FileInput
The built-in fileinput tag — a file picker styled like the other inputs, with accept, multiple, and clearable.
A built-in tag for a file picker that matches the rest of your form. It uses the same
Input wrapper as 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.
{% fileinput label='Resume' placeholder='Choose a file' %}
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.
{% fileinput label='Images' accept='image/png,image/jpeg' multiple=true clearable=true placeholder='Pick one or more images' %}
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.
PDF only
A signed contract is required
{% fileinput label='Contract' description='PDF only' accept='application/pdf' required=true error='A signed contract is required' %}
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.
{% fileinput label='Filled' variant='filled' placeholder='filled variant' %}
{% fileinput label='Large + round' size='lg' radius='xl' placeholder='lg / xl radius' %}
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.
{% fileinput label='Attachment' leftSection='📎' placeholder='Add a file' %}
{% fileinput label='Locked' disabled=true placeholder='Upload disabled' %}
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.
{% fieldset legend='Application' %}
{% textinput label='Full name' placeholder='Ada Lovelace' %}
{% fileinput label='Resume' accept='application/pdf' placeholder='Upload your resume' %}
{% endFieldset %}
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)
The picker renders as a button that opens the operating system’s file dialog — the native
file input itself stays hidden, so the field can carry the same border, sections, and error
styling as the text fields beside it. Once files are chosen, their names replace the
placeholder text. A handler attached with attr={'onchange': …} runs on that rendered
control after each selection: event.target.files is the chosen File list and
event.target.value is their names joined with commas. With multiple on, the selection
is a list even when it holds a single file.
The picker renders as a button that opens the operating system’s file dialog — the native
file input itself stays hidden, so the field can carry the same border, sections, and error
styling as the text fields beside it. Once files are chosen, their names replace the
placeholder text. A handler attached with attr={'onchange': …} runs on that rendered
control after each selection: event.target.files is the chosen File list and
event.target.value is their names joined with commas. With multiple on, the selection
is a list even when it holds a single file.
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. Defaults to sm. |
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. |
attr |
dict (attr={…}) |
Raw HTML attributes (e.g. onchange) applied to the rendered control — a <button> here, since the native file input stays hidden. |
CSS Selectors
Target a {% fileinput %} from your own CSS with the island data attribute or the Mantine Styles API part classes:
/* 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:
{% 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');
'''} %}
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');
'''})