MaskInput

The built-in maskinput tag — a text field that formats entry against a fixed pattern (phone, date, card), with the full Input wrapper.

A masked text field — entry is constrained to a fixed pattern as the reader types, with separators inserted automatically. Reach for it for phone numbers, dates, and card numbers. It carries the same Input wrapper as TextInput — label, description, error, sections — plus the mask pattern.

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

Mask tokens

mask is a pattern where each token constrains one character and every other character is a literal separator inserted for you.

Token	Matches
`9`	A digit (`0`–`9`).
`a`	A letter (`A`–`Z`, `a`–`z`).
`A`	An uppercase letter (`A`–`Z`).
`*`	A letter or a digit.
`#`	A digit or a sign (`0`–`9`, `+`, `-`).
anything else	A literal separator, inserted automatically.

Basic field

A phone mask: type digits and the parentheses, space, and dash appear on their own.

Phone

Source: Markdown

Source: Python

More patterns

A date mask uses only 9; a card mask groups digits; a license mask mixes letters and digits.

Date

Card

License

Three letters, a dash, four digits

Serial

Letters or digits

Source: Markdown

Source: Python

Default value

defaultValue seeds the field; the value is masked on render.

Phone

Source: Markdown

Source: Python

Required, error, and disabled

required and withAsterisk add the asterisk; error shows a validation message; disabled greys the control out.

Phone

Card

Card number is incomplete

On-file number

Source: Markdown

Source: Python

Variants, size, radius, and sections

variant is default, filled, or unstyled; size and radius take xs–xl; leftSection/rightSection add text inside the field.

Filled

Large, round

Phone

Source: Markdown

Source: Python

With other components

Combine a masked phone field with a TextInput inside a {% card %}.

Contact

Full name

Phone

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`mask`	string of tokens (`9`, `a`, `A`, `*`, `#`) plus literal separators	The entry pattern (see the tokens table above).
`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.
`defaultValue`	string	Initial value (masked on render).
`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 {% maskinput %} from your own CSS with the island data attribute or the Mantine Styles API part classes:

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

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

Phone

Source: Markdown

Source: Python