Skip to main content
Login
Sign up
View in Markdown

PasswordInput

The built-in passwordinput tag — a password field with a built-in show/hide visibility toggle and the full Mantine Input wrapper.

A password field with a built-in show/hide visibility toggle on the right. It carries the same Input wrapper as TextInput — label, description, error, leftSection — plus defaultVisible to start the field revealed. The toggle button occupies the right section, so only leftSection is exposed.

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

Basic field

A label and a placeholder; click the eye icon to reveal the value.


Start revealed

defaultVisible opens the field with the value shown — handy for an API key or token the reader needs to copy.


Required, asterisk, and error

required and withAsterisk add the asterisk; error shows a validation message and switches the field to the error color.

Too weak — add a number


Disabled

disabled greys the control out.


Variants, size, radius, and section

variant is default, filled, or unstyled; size and radius take xs–xl; leftSection adds text before the value (the right side holds the toggle).

🔒

With other components

Build a sign-in form with a TextInput and a password field inside a {% card %}.

Sign in

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.
defaultValue string Initial value of the field.
defaultVisible bool (true / false) Start with the value revealed instead of masked.
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 (the right side holds the visibility toggle).

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-PasswordInput-root { }
.mantine-PasswordInput-innerInput { }
.mantine-PasswordInput-visibilityToggle { }

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


Was this page helpful?

Edit this pageReport an issueAsk a question