PasswordField

A password input field with a built-in show/hide toggle button and an optional strength meter. It automatically sets the autocomplete attribute based on whether the field is for a new password or an existing one.

Basic Usage

<ArcadiaForm Model="model">
    <PasswordField Field="@nameof(Model.Password)" Label="Password" />
</ArcadiaForm>

<PasswordField Field="@nameof(Model.Password)" Label="Password" ShowStrength="false" IsNew="false" />

Parameters

Parameter	Type	Default	Description
`Value`	`string?`	`null`	The current password value. Supports two-way binding.
`ValueChanged`	`EventCallback<string?>`		Callback invoked whenever the user modifies the password.
`ShowStrength`	`bool`	`true`	Whether a visual password strength meter is displayed below the input.
`IsNew`	`bool`	`true`	Whether this is a new password (`autocomplete="new-password"`) or existing (`autocomplete="current-password"`).

Inherited from FieldBase

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Visible label displayed above the field.
`Placeholder`	`string?`	`null`	Placeholder text shown when the field is empty.
`HelperText`	`string?`	`null`	Helper text displayed below the field.
`Required`	`bool`	`false`	Whether the field is required.
`Disabled`	`bool`	`false`	Whether the field is disabled.
`ReadOnly`	`bool`	`false`	Whether the field is read-only.
`Errors`	`IReadOnlyList<string>?`	`null`	Validation errors to display.
`Schema`	`FieldSchema?`	`null`	Field schema definition for dynamic form generation.

Strength Meter

The built-in strength meter scores passwords on five criteria:

8+ characters
12+ characters
Mixed case (uppercase and lowercase)
Contains digits
Contains special characters

Strength levels: Weak, Fair, Good, Strong, Very strong.

Validation

<PasswordField Field="@nameof(Model.Password)" Label="Password" Required="true" />

public class RegisterModel
{
    [Required]
    [MinLength(8, ErrorMessage = "Password must be at least 8 characters.")]
    public string Password { get; set; } = "";
}

Accessibility

The visibility toggle button has a dynamic aria-label (“Show password” / “Hide password”).
Required fields set aria-required="true" and display a visual * indicator.
Validation errors are linked via aria-describedby and announced with role="alert".