I am wondering if it would be possible to create a toggle on an password input field to give the user the ability to toggle between the password being hidden or shown, without using a JavaScript interop.

What I’m trying at the moment is binding a checkbox to a property and set the visibility of the password based on that check being true or false.

@page "/Test"

<div class="form-floating mb-3">
    <input @bind="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" type="@(ShowPassword ? "text" : "password")" />
    <label for="password" class="form-label">Password</label>
    <ValidationMessage For="() => Input.Password" class="text-danger" />
</div>
<div class="form-check mb-3">
    <input type="checkbox" @bind="ShowPassword" class="form-check-input" />
    <label class="form-check-label" for="showPassword">Show Password</label>
</div>

@code {

    private bool ShowPassword { get; set; } = false;

    private sealed class InputModel
    {
        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; } = "";
    }
}

I’m trying to use data binding instead of the interop, I understand the @bind directive already sets a onchange event, what am I missing here?