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.

Resume

Source: Markdown

Source: Python

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.

Images

Source: Markdown

Source: Python

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.

Contract

PDF only

A signed contract is required

Source: Markdown

Source: Python

Variant, size, and radius

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

Filled

Large + round

Source: Markdown

Source: Python

Sections and disabled

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

Attachment

📎

Locked

Source: Markdown

Source: Python

With other components

Group a file picker with other fields inside a fieldset.

Application

Full name

Resume

Source: Markdown

Source: Python

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:

/* 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:

Resume

Source: Markdown

Source: Python