Toggling between showing and hiding password on Blazor

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?