TextInput

The built-in textinput tag — a single-line text field with the full Mantine Input wrapper: label, description, error, size, radius, variant, sections.

A single-line text field with the full Input wrapper: a label, helper description, error message, and left/right sections. Reach for it for emails, names, URLs, search boxes — any short, single-line value. Every field below takes a label so the control stays accessible.

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

Basic field

A label, a placeholder, and a description below the label.

Work address

Source: Markdown

Source: Python

Required and asterisk

required marks the field required and adds the asterisk; withAsterisk adds the asterisk without the HTML required attribute.

Username

Display name

Source: Markdown

Source: Python

Error and disabled

error shows a validation message below the field and switches it to the error color; disabled greys the control out.

Enter a valid email address

Account ID

Source: Markdown

Source: Python

Input type

type sets the HTML input type — email, url, tel, search, password, number, and so on — which drives browser validation and the mobile keyboard.

Website

Phone

Source: Markdown

Source: Python

Variants

variant is default, filled, or unstyled.

Default

Filled

Unstyled

Source: Markdown

Source: Python

Size and radius

size takes xs–xl; radius takes xs–xl (or any CSS length).

Extra small

Large, round

Source: Markdown

Source: Python

Sections

leftSection and rightSection take text (an emoji, symbol, or short string) shown inside the field, before and after the value.

Website

.com

Source: Markdown

Source: Python

With other components

Drop fields into a {% card %} to build a compact sign-in form.

Workspace

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`label`	string	Field label above the input.
`description`	string	Helper text below the label.
`placeholder`	string	Placeholder shown when the field is empty.
`error`	string	Validation message below the field; switches it to the error color.
`type`	`text`, `email`, `url`, `tel`, `search`, `password`, `number`, …	HTML input type — drives browser validation and the mobile keyboard.
`defaultValue`	string	Initial value of the field.
`variant`	`default`, `filled`, `unstyled`	Visual style of the input.
`size`	`xs`, `sm`, `md`, `lg`, `xl`	Control size.
`radius`	`xs`, `sm`, `md`, `lg`, `xl`, or any CSS length	Corner radius.
`required`	bool (`true` / `false`)	Mark the field required and add the asterisk.
`withAsterisk`	bool (`true` / `false`)	Add the asterisk without the HTML `required` attribute.
`disabled`	bool (`true` / `false`)	Render the field disabled.
`leftSection`	string	Text shown inside the field, before the value.
`rightSection`	string	Text shown inside the field, after the value.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-TextInput-root { }
.mantine-TextInput-input { }
.mantine-TextInput-label { }
.mantine-TextInput-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:

Work address

Source: Markdown

Source: Python