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.
Interactions
Interactions 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.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the field label.
Text Color / Font Size / Font Style / Font Weight: Set the label color and typography.
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.
Last updated
Was this helpful?