> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-password.md). # Input Password The Avonni Password Input component lets users securely enter masked text in a form field, with built-in support for length constraints, pattern validation, a required state, and fully customizable error messages. ## Overview Use the Password Input whenever you need to collect a sensitive value — login passwords, PINs, or any text that should not be visible on screen. Characters are masked as the user types, and validation feedback is shown inline. ## Configuration To configure the Password Input, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom. ### Properties #### Label The text label displayed above the input field. Use a clear, concise description so users understand what value they should enter. #### Value The initial or pre-filled value of the input field. #### Field Level Help Help text detailing the purpose and function of the input. When provided, a help icon appears next to the label; hovering or clicking it reveals the text. #### Variant Controls the appearance of the label relative to the input field. Options: * **Standard** (default) — label is placed above the input. * **Label Hidden** — label is hidden from view but still accessible to screen readers. * **Label Inline** — label sits to the left of the input on the same line. * **Label Stacked** — label floats above the field when the input is focused or filled. #### Placeholder Text displayed inside the field when it is empty, prompting the user for a valid entry. Disappears as soon as the user starts typing. #### Maximum Length The maximum number of characters allowed in the field. Leave blank to impose no upper limit. #### Message When Too Long Error message displayed when the entered value exceeds the **Maximum Length**. Requires: **Maximum Length** to be set. #### Minimum Length The minimum number of characters the field must contain. #### Message When Too Short Error message displayed when the entered value is shorter than the **Minimum Length**. Requires: **Minimum Length** to be set. #### Pattern A regular expression that the input's value must match in order to pass validation. For example, `(?=.*\d)` requires at least one digit. #### Message When Pattern Mismatch Error message displayed when the entered value does not match the **Pattern**. Requires: **Pattern** to be set. #### Required When enabled, the field must be filled before the form can be submitted. A red asterisk appears next to the label to signal this to users. #### Message When Value Missing Error message displayed when the field is left blank and **Required** is enabled. Requires: **Required** to be enabled. #### Disabled When enabled, the input field is disabled and users cannot interact with it. #### Read Only When enabled, the input field is read-only and its value cannot be edited. Available under **Advanced Options**. #### Message When Bad Input Error message displayed when the browser detects that the entered value is otherwise invalid (for example, a browser-level type mismatch). Available under **Advanced Options**. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Password Input. Configure them from the **Interactions** tab of the Edit Password Input panel. ### Change Fires when the user modifies the value of the input field. Use this to react to input in real time — for example, to enable a submit button, validate against a second field, or update another component on the page. ## Styling Configure the Input Password's appearance from the **Style** tab of the Edit Input Password panel. {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the component. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the component's content and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} Controls the component's dimensions. * **Width / Height:** Set fixed dimensions. * **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds. * **Overflow:** Control how content that exceeds the bounds is handled. {% endtab %} {% tab title="Border" %} Customizes the border surrounding the component. * **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding. {% endtab %} {% tab title="Label" %} Styles the field label. * **Text Color / Font Size / Font Style / Font Weight:** Set the label color and typography. {% endtab %} {% tab title="Input" %} Styles the input field. * **Background Color / Text Color / Border Color / Border Radius:** Set the input colors and corner rounding. * **Spacing Horizontal Start / Spacing Horizontal End:** Set the inner horizontal spacing. {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/input-password.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.