Textarea

The built-in textarea tag — a multi-line text field with autosize, minRows/maxRows, resize, and the full Mantine Input wrapper.

A multi-line text field. It carries the same Input wrapper as TextInput — label, description, error, sections — and adds the textarea specifics: autosize, minRows/maxRows, and resize. Reach for it for bios, notes, messages, and any longer free-form value.

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

Basic field

A label, a placeholder, and a fixed starting height with minRows.

Autosize

autosize grows the field with its content. Set a floor with minRows and a cap with maxRows.

Resize

resize is none, both, horizontal, or vertical — it controls the drag handle in the field’s corner.

Required, asterisk, and disabled

required and withAsterisk add the asterisk; disabled greys the control out.

Error

error shows a validation message below the field and switches it to the error color.

Variants, size, and radius

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

Sections

leftSection and rightSection take text shown inside the field.

With other components

Pair a textarea with a TextInput inside a {% card %} to build a feedback form.

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-Textarea-root { }
.mantine-Textarea-input { }
.mantine-Textarea-label { }

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: