Input

The built-in input tag — the low-level, unstyled base input primitive every field is built on; just the styled control, no label or message wrapper.

A built-in tag for the base input primitive — the styled control with no label, description, or error message of its own. Every other field on this page is built on it. Reach for input when you want just the box (for example, inside your own layout). For a full labelled field, use TextInput instead.

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

Basic control

placeholder is shown when the control is empty; type sets the HTML input type.

Type and default value

type accepts any HTML input type (search, email, tel, …); defaultValue sets the initial value.

Variant, size, and radius

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

Error and disabled

error is a boolean that adds error styling (there is no wrapper to render a message); disabled renders the control inert.

Sections

leftSection and rightSection put text inside the control — handy for units or symbols.

With other components

input has no label, so when you need an accessible field reach for the wrapped textinput instead. The bare control is best for composing your own layouts — here it sits next to a button as an inline search bar inside a group.

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-Input-wrapper { }
.mantine-Input-input { }
.mantine-Input-section { }

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 changing the field logs its new value to the console and alerts it: