Input

The built-in input tag — the base input control every other field is built on: the styled box on its own, with no label, description, or error 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', …).

No wrapper — just the control

Input is the bare control: it still carries the full field styling (border, background, focus ring), it just has no message furniture around it. The label, description, and error messages you see on the other fields come from Input.Wrapper, which they compose on top of Input. So input here has no label or description, and its error is a boolean that adds error styling rather than a message string. Use variant='unstyled' if you want the border and background gone as well.

Basic control

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

Source: Markdown

Source: Python

Type and default value

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

Source: Markdown

Source: Python

Variant, size, and radius

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

Source: Markdown

Source: Python

Error and disabled

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

Source: Markdown

Source: Python

Sections

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

USD

Source: Markdown

Source: Python

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.

Source: Markdown

Source: Python

Give a bare control an accessible name

Because input renders no <label>, assistive technology has nothing to announce it by apart from its placeholder. When the surrounding markup does not already name it, pass a name through the raw attribute channel — attr={'aria-label': 'Search the docs'} — or use TextInput, which renders a real label tied to the control.

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`placeholder`	string	Placeholder shown when the control is empty.
`type`	HTML input type (`text`, `search`, `email`, `tel`, `url`, …)	The native input type.
`defaultValue`	string	Initial value of the control.
`variant`	`default`, `filled`, `unstyled`	Visual style.
`size`	`xs`, `sm`, `md`, `lg`, `xl`	Control size.
`radius`	`xs`, `sm`, `md`, `lg`, `xl` (or any CSS value)	Corner radius.
`disabled`	`true` / `false`	Render the control disabled. Default `false`.
`error`	`true` / `false`	Add error styling. Boolean — there is no wrapper for a message. Default `false`.
`leftSection`	string	Text shown inside the control on the left.
`rightSection`	string	Text shown inside the control on the right.

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:

Source: Markdown

Source: Python