Skip to content
Navius

Password Toggle Field

Overview

Section titled “Overview”

PasswordToggleField pairs a password input with a button that flips it between type="password" and type="text". It can be controlled (@bind-Visible) or uncontrolled (DefaultVisible), and automatically re-hides the value when the enclosing form submits or resets, so a revealed password is never persisted.

Anatomy

Section titled “Anatomy”
@using Navius.Primitives.Components.PasswordToggleField


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

Root

Section titled “Root”

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

Prop Type Default Description
Visible bool false Controlled revealed state. Pair with VisibleChanged (@bind-Visible).
VisibleChanged EventCallback<bool> - Fires when the controlled Visible should change.
DefaultVisible bool false Uncontrolled initial revealed state.
ChildContent RenderFragment? - The field’s input and toggle.

Input

Section titled “Input”

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

Prop Type Default Description
Attributes IDictionary<string, object>? - Forwarded to the rendered input (value, oninput, and so on). Defaults autocomplete to "current-password", overridable by the consumer.

Toggle

Section titled “Toggle”

The button that flips visibility. Renders a button with a flipping accessible name and aria-controls pointing at the Input’s id; does not set aria-pressed.

Prop Type Default Description
ChildContent RenderFragment? - Toggle content, typically an Icon.
Attributes IDictionary<string, object>? - Forwarded to the rendered button.

Icon

Section titled “Icon”

Renders one of two fragments depending on the current visibility.

Prop Type Default Description
Visible RenderFragment? - Content shown while the password is revealed (type="text").
Hidden RenderFragment? - Content shown while the password is hidden (type="password").

Keyboard interactions

Section titled “Keyboard interactions”
Key Behavior
Space Toggles password visibility. Focus stays on the button.
Enter Toggles password visibility. Focus stays on the button.

ARIA mechanism

Section titled “ARIA mechanism”

The Toggle is a native button whose accessible name flips between “Show password” and “Hide password” as the state changes, and carries aria-controls pointing at the Input’s id. aria-pressed and any state data attribute are deliberately omitted so screen readers don’t double-announce the state; the flipping name is the only state signal. A pointer click on the Toggle returns focus to the Input; keyboard or virtual activation keeps focus on the Toggle. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.