kb(textbox): Add KB for password textbox eye toggle

components/textbox/overview.md

@@ -61,7 +61,7 @@ The Blazor TextBox provides various parameters to configure the component:
 | `MaxLength` | `int?` | Maps to the `maxlength` attribute of the HTML `<input />` element. |
 | `InputMode` | `string` | A `string` that maps to the [`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) attribute of the HTML element. You can use it to instruct the rendering device to show a suitable virtual keyboard (for example, one optimized for entering an URL or an email). Make sure to use values that make sense for a text input. For example, if you need a numerical input, use the TelerikNumericTextBox component, or the TelerikDatePicker for dates. |
 | `Name` | `string` | The `name` attribute of the HTML element. It is usually required so the `AutoComplete` will be honored by the browser. |
-| `Password` | `bool` | When set to `true`, the HTML element renders `type="password"` so that the user input is hidden. You can find examples of validation and reveal buttons in the [Live Demo: Password Textbox](https://demos.telerik.com/blazor-ui/textbox/password) |
+| `Password` | `bool` | When set to `true`, the HTML element renders `type="password"` so that the user input is hidden. You can find examples of validation and reveal buttons in the [Password Textbox demo](https://demos.telerik.com/blazor-ui/textbox/password) and the [Add Eye Icon to Reveal a TextBox Password]({%slug textbox-kb-eye-reveal-password%}) article. |
 | `Placeholder` | `string` | A `string` that maps to the `placeholder` attribute of the HTML element. If a `Label` is defined, it will be shown instead of the placeholder when the input is not focused. |
 | `ShowClearButton` | `bool` | Defines if the user can clear the component value through an **x** button rendered inside the input. |
 | `SpellCheck` | `string` | A `string` that maps to the [`spellcheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck) attribute of the HTML element. Use it to disable browser spellchecking if it's intrusive to the user or due to [privacy and security concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck#security_and_privacy_concerns). |
@@ -113,22 +113,7 @@ The TextBox provides a `FocusAsync` method that allows the application to focus
 
 >caption Password type TextBox
 
-````RAZOR
-@* An example of enabling the Password mode of the text box. Make sure to add a form and validation
-for example: https://demos.telerik.com/blazor-ui/textbox/password
-*@
-
-<TelerikTextBox Password="true"
-                @bind-Value="@ThePassword"
-                AutoComplete="current-password"
-                Name="password" Id="password" />
-
-@code {
-    // in a real case you should have a form, a model, and validation
-    // the form may also need autocomplete attribute and other corresponding inputs to enable autocompletion
-    string ThePassword { get; set; }
-}
-````
+See [Add Eye Icon to Reveal a TextBox Password]({%slug textbox-kb-eye-reveal-password%}).
 
 >caption Programmatically change the TextBox value
 

knowledge-base/textbox-eye-reveal-password.md

@@ -0,0 +1,83 @@
+---
+title: Add Eye Icon to Reveal a TextBox Password
+description: Learn how to implement an eye toggle button that reveals the typed password in a Telerik TextBox for Blazor.
+type: how-to
+page_title: How to Add Eye Icon to Telerik Password TextBox in Blazor
+slug: textbox-kb-eye-reveal-password
+tags: telerik, blazor, textbox
+ticketid: 1673598, 1672864, 1656817, 1655436, 1640843, 1619127, 1584950
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>TextBox for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+This KB answers the following questions:
+
+* How to add an eye icon to a text input and click the icon to show and hide the entered password?
+* How to implement a button that reveals the password in a Telerik TextBox on click?
+* How to make an eye toggle appear in a password textbox no matter if the textbox is focused or not?
+* How to use `mouseup` and `mousedown` events on the `TelerikSvgIcon` control to toggle a password field?
+
+## Solution
+
+1. Add a [Button]({%slug components/button/overview%}) or a [ToggleButton]({%slug togglebutton-overview%}) with the desired [icon]({%slug button-icons%}) next to the TextBox or inside the [TextBox `SuffixTemplate`]({%slug common-features/input-adornments%}).
+1. Use the [Button's `OnClick` event handler]({%slug button-events%}) to toggle the [TextBox `Password` parameter]({%slug components/textbox/overview%}#textbox-parameters) value.
+1. (optional) Instead of Button `OnClick`, use `@onmousedown` and `@onmouseup` Blazor events on a generic HTML element to toggle the TextBox `Password` parameter. This approach allows using events with Telerik components that do not expose them, for example, a [Telerik SVG icon or a font icon]({%slug common-features-icons%}).
+1. To use the TextBox with a reveal button inside a [Telerik Form, use a `FormItem` `Template`]({%slug form-formitems-template%}).
+
+>caption Add an eye icon to reveal a password
+
+````RAZOR
+<p>Reveal password on Telerik Button OnClick</p>
+
+<TelerikTextBox @bind-Value="@TextBoxValue1" Password="@TextBoxPassword1" Width="200px">
+    <TextBoxSuffixTemplate>
+        <TelerikToggleButton Icon="@( TextBoxPassword1 ? SvgIcon.Eye : SvgIcon.EyeSlash )"
+                             OnClick="@( () => TextBoxPassword1 = !TextBoxPassword1 )"
+                             Selected="@( !TextBoxPassword1 )" />
+    </TextBoxSuffixTemplate>
+</TelerikTextBox>
+
+<p>Reveal password on HTML element @@onmousedown</p>
+
+<TelerikTextBox @bind-Value="@TextBoxValue2" Password="@TextBoxPassword2" Width="200px">
+    <TextBoxSuffixTemplate>
+        <span @onmousedown="@( () => TextBoxPassword2 = false )"
+              @onmouseup="@( () => TextBoxPassword2 = true )">
+            <TelerikButton Icon="@SvgIcon.Eye" ButtonType="@ButtonType.Button" />
+        </span>
+    </TextBoxSuffixTemplate>
+</TelerikTextBox>
+
+<style>
+    /* Hide native browser eye icon in Edge if enabled */
+    input.k-input-inner[type="password"]::-ms-reveal,
+    input.k-input-innerinput[type="password"]::-ms-clear {
+        display: none;
+    }
+</style>
+
+@code {
+    private string TextBoxValue1 { get; set; } = "abcde1";
+    private bool TextBoxPassword1 { get; set; } = true;
+
+    private string TextBoxValue2 { get; set; } = "zyxwv2";
+    private bool TextBoxPassword2 { get; set; } = true;
+}
+````
+
+## See Also
+
+* [Input Adornments]({%slug common-features/input-adornments%})
+* [Form Item Templates]({%slug form-formitems-template%})