Password Input
A password field with built-in visibility toggle and optional strength meter — provides clear feedback as users create secure passwords.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <PasswordInput />
When to Use
- Login forms where users enter existing passwords
- Registration flows where you want to show password strength feedback
- Password change or reset screens
- Any secure input that benefits from a show/hide visibility toggle
Try: "abc", "abc123", "Abc123!", "Abc123!@#xyz"
Show Strength:
Show Toggle:
Toggle the strength meter and visibility button on and off.
API Reference
PasswordInput
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string? | — | The current password value. Supports two-way binding. |
| Placeholder | string | "Enter password" | Input placeholder text. |
| ShowToggle | bool | true | Show the eye icon to toggle password visibility. |
| ShowStrength | bool | false | Show a 4-bar strength indicator below the input. |
| Disabled | bool | false | Disable the input. |
| ValueChanged | EventCallback<string?> | — | Two-way binding callback; fires when the value changes. |
| Required | bool | false | Marks the field as required. Syncs with a parent FormField. |
| Invalid | bool | false | Applies error styling. Syncs with a parent FormField. |
| ErrorText | string? | null | Error message displayed below the field when Invalid is true. |
| HelperText | string? | null | Helper text shown below the field when not invalid. |
| Label | string? | null | Label rendered above the field (standalone, without FormField). |
| Name | string? | null | HTML name attribute for form submission. |
| FormField | FormField.FormFieldContext? | null | Cascaded context from a parent FormField; wires label, validation, and required state automatically. |