Components / Password Toggle Field

Password Toggle Field

A password input paired with a button that toggles whether the value is visible.

razor

<NaviusPasswordToggleField @bind-Visible="_visible">
    <NaviusPasswordToggleFieldInput placeholder="Password" />
    <NaviusPasswordToggleFieldToggle>
        <NaviusPasswordToggleFieldIcon>
            <Visible><EyeOffIcon /></Visible>
            <Hidden><EyeIcon /></Hidden>
        </NaviusPasswordToggleFieldIcon>
    </NaviusPasswordToggleFieldToggle>
</NaviusPasswordToggleField>

@code { private bool _visible; }

Features

Toggles the input between password and text.
Controlled (@bind-Visible) or uncontrolled (DefaultVisible).
Automatically re-hides the value when the enclosing form submits or resets, so a revealed password is never persisted.
A two-state Icon part renders the correct glyph for the current visibility.

Installation

Terminal bash

navius add password-toggle-field

Anatomy

razor

@using Navius.Primitives.Components.PasswordToggleField

<NaviusPasswordToggleField>
    <NaviusPasswordToggleFieldInput />
    <NaviusPasswordToggleFieldToggle>
        <NaviusPasswordToggleFieldIcon>
            <Visible>...</Visible>
            <Hidden>...</Hidden>
        </NaviusPasswordToggleFieldIcon>
    </NaviusPasswordToggleFieldToggle>
</NaviusPasswordToggleField>

API Reference

Root

Owns the visibility state and cascades it. Renders no DOM element.

Prop	Type	Default
Visible	bool	false
VisibleChanged	EventCallback<bool>	-
DefaultVisible	bool	false
ChildContent	RenderFragment?	-

Input

The password input; its type swaps with the visibility. Renders an input.

Prop	Type	Default
(attributes)	splatted (value, oninput, …)	-

Toggle

The button that flips visibility. Renders a button with a flipping accessible name (no aria-pressed).

Prop	Type	Default
ChildContent	RenderFragment?	-

Icon

Renders one of two fragments depending on the current visibility.

Prop	Type	Default
Visible	RenderFragment?	-
Hidden	RenderFragment?	-

Accessibility

State is conveyed only through the toggle's flipping accessible name ("Show password" / "Hide password"); aria-pressed and any state data-attribute are deliberately omitted so screen readers don't double-announce. The toggle is a native button.

Keyboard interactions

Key	Description
`Space`	Toggles password visibility (focus stays on the button).
`Enter`	Toggles password visibility (focus stays on the button).