PinInput

The built-in pininput tag — a row of single-character boxes for one-time codes and PINs, with length, type, mask, and OTP autofill.

A built-in tag for one-time-code or PIN entry — a row of single-character boxes that advance as you type. It is not an Input wrapper, so it has no label or message of its own; its error is a boolean that adds error styling to every box. Pair it with a heading or a textinput label when you need a caption.

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

Basic PIN

length sets the number of boxes (four by default).

Length and type

type is number (default, digits only) or alphanumeric (letters and digits).

Mask and OTP autofill

mask obscures entered characters like a password; oneTimeCode opts into the browser’s one-time-code autofill so an SMS code can be filled automatically.

Placeholder, size, radius, and gap

placeholder sets the per-box placeholder character; size and radius style each box; gap is the space between boxes.

Error and disabled

error is a boolean that adds error styling and aria-invalid to every box; disabled makes the whole row inert.

With other components

PinInput has no label of its own, so pair it with a heading and supporting text inside a card to make a complete verification prompt.

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-PinInput-root { }
.mantine-PinInput-pinInput { }
.mantine-PinInput-input { }

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. For a PIN field that’s a demonstration only — never log or transmit a real PIN value in production: