# Password Input

Source: https://lumeo.nativ.sh/components/password-input

# Password Input

A password field with built-in visibility toggle and optional strength meter — provides clear feedback as users create secure passwords.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic Password Input

Preview Code

With Strength Meter

Try: "abc", "abc123", "Abc123!", "Abc123!@#xyz"

Preview Code

Without Toggle Button

Preview Code

With Strength + Custom Placeholder

Preview Code

Disabled

Preview Code

Interactive Options

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.

## Related Components

-   [Input](/components/input) — Standard text input for non-sensitive fields
-   [Form](/components/form) — Wrap PasswordInput with validation and labels in form layouts
-   [OtpInput](/components/otp-input) — Fixed-length code entry for 2FA and verification flows